What is the best method to add an overlay div onto another div when hovered, with a grid-style layout?

Question

What is the best method to add an overlay div onto another div when hovered, with a grid-style layout?

I attempted to create a grid-like design where each div would display an overlay on hover.

The overlay div includes two buttons that should be centered.

Although I believe the logic of my code is correct, the position of the buttons and overlay is not centered on the image div as intended.

Image Display Without Overlay

Image Display On Hover With Overlay

Html Code

<ul>
    <li>
        <div class="image"><img src="https://i.sstatic.net/rOVDt.jpg"/></div>
        <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>
    <li>
<div class="image"><img src="https://i.sstatic.net/rOVDt.jpg"/></div>
         <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>
    <li>
<div class="image"><img src="https://i.sstatic.net/rOVDt.jpg"/></div>
         <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>
    <li>
<div class="image"><img src="https://i.sstatic.net/rOVDt.jpg"/></div>
        <div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
    </li>

</ul>

CSS Code

.image{
 width:100px;
 height:100px;

}
.overlay{
 width:100px;
 height:100px;
 display:none; 
}

ul { list-style: none; width: 100%; }
ul li { display:inline-block; width:150px;}
.image:hover +.overlay {
    display:block;
    background-color:black;
    top:0;
    opacity:0.75;

}
.bt1 {
    background-color:orange;
    position:absolute;
    width:50px;
    height:50px;
    margin:0 0 0 5%;
}
.bt2 {
    background-color:green;
    position:absolute;
    width:50px;
    height:50px;
    margin:0 5% 0 0;
}

JSfiddle . Since the image sizes are changeable, fixed padding to center the buttons may not be a viable solution. Can anyone suggest a method for properly positioning the overlay?

javascript jquery html css

Answer 1

Answer №1

Adjusted the positions and added a height to the li element to accommodate the larger image.

Link to Code

.image{
 width:100px;
 height:100px;

}
.overlay{
 width:100%;
 height:100%;
display:none;
    position:absolute;
    top:0px;
    left:0px;
}
.overlay div {
    position:relative;
    display:inline-block;
    top:50%;
    margin:-50% 5px 0 0;
}
ul { list-style: none; width: 100%; }
ul li { position:relative;display:inline-block; width:150px;height:150px;}
li:hover .overlay {
    display:block;
    background-color:black;
    opacity:0.75;
}
.bt1 {
    background-color:orange;
    width:50px;
    height:50px;
}
.bt2 {
    background-color:green;
    width:50px;
    height:50px;
}

Answer 2

Adjusted the positions and added a height to the li element to accommodate the larger image.

Link to Code

.image{
 width:100px;
 height:100px;

}
.overlay{
 width:100%;
 height:100%;
display:none;
    position:absolute;
    top:0px;
    left:0px;
}
.overlay div {
    position:relative;
    display:inline-block;
    top:50%;
    margin:-50% 5px 0 0;
}
ul { list-style: none; width: 100%; }
ul li { position:relative;display:inline-block; width:150px;height:150px;}
li:hover .overlay {
    display:block;
    background-color:black;
    opacity:0.75;
}
.bt1 {
    background-color:orange;
    width:50px;
    height:50px;
}
.bt2 {
    background-color:green;
    width:50px;
    height:50px;
}

Answer 3

Answer №2

To ensure that your elements with the classes .image and .overlay are positioned correctly, you need to make sure they are displayed in the same location. To achieve this, you should add a position:relative to ul li and apply position:absolute to both classes.

Once you have set up the positioning, it becomes simpler to arrange your elements. You can refer to this example on jsfiddle for guidance.

.image{
    position:absolute;
    left:0;
    top:0;
    width:150px;
    height:150px;

}
.overlay{
    position:absolute;
    left:0;
    top:0;
    width:150px;
    height:150px;
    display:none; 
}

ul { 
    list-style: none; 
    width: 100%; 
}
ul li { 
    display:inline-block; 
    width:160px; 
    position:relative;
}
li:hover .overlay {
    display:block;
    background-color:black;
    opacity:0.75;

}
.bt1 {
    background-color:orange;
    position:absolute;
    width:50px;
    height:50px;
    left:5%; <-- you may have to play with those values if you want to place them somewhere else
    top:30%; <--  same as above
}
.bt2 {
    background-color:green;
    position:absolute;
    width:50px;
    height:50px;
    right:5%;
    top:30%;
}

Answer 4

To ensure that your elements with the classes .image and .overlay are positioned correctly, you need to make sure they are displayed in the same location. To achieve this, you should add a position:relative to ul li and apply position:absolute to both classes.

Once you have set up the positioning, it becomes simpler to arrange your elements. You can refer to this example on jsfiddle for guidance.

.image{
    position:absolute;
    left:0;
    top:0;
    width:150px;
    height:150px;

}
.overlay{
    position:absolute;
    left:0;
    top:0;
    width:150px;
    height:150px;
    display:none; 
}

ul { 
    list-style: none; 
    width: 100%; 
}
ul li { 
    display:inline-block; 
    width:160px; 
    position:relative;
}
li:hover .overlay {
    display:block;
    background-color:black;
    opacity:0.75;

}
.bt1 {
    background-color:orange;
    position:absolute;
    width:50px;
    height:50px;
    left:5%; <-- you may have to play with those values if you want to place them somewhere else
    top:30%; <--  same as above
}
.bt2 {
    background-color:green;
    position:absolute;
    width:50px;
    height:50px;
    right:5%;
    top:30%;
}

Answer 5

Answer №3

If you want to manipulate the position of an image using CSS, you can use the code snippet below:

position:absolute;
z-index:-1;

The z-index property is used to determine the stacking order of elements on a webpage.

An element with a higher z-index value will appear in front of elements with lower z-index values.

Remember, the z-index property only affects elements that are positioned using position:absolute, position:relative, or position:fixed.

You can view an example of this solution here: http://jsfiddle.net/xAkJG/1/

Answer 6

If you want to manipulate the position of an image using CSS, you can use the code snippet below:

position:absolute;
z-index:-1;

The z-index property is used to determine the stacking order of elements on a webpage.

An element with a higher z-index value will appear in front of elements with lower z-index values.

Remember, the z-index property only affects elements that are positioned using position:absolute, position:relative, or position:fixed.

You can view an example of this solution here: http://jsfiddle.net/xAkJG/1/

Answer 7

Answer №4

After stumbling upon this question, I decided to craft my own solution using flexbox. The result is a more aesthetically pleasing centering of the buttons!

Check out my solution on CSSDeck

<ul>
    <li>
        <div class="image"><img src="https://i.sstatic.net/rOVDt.jpg"/></div>
        <div class="overlay"><div><div class="bt1"></div><div class="bt2"></div></div></div>
    </li>
    <li>
<div class="image"><img src="https://i.sstatic.net/rOVDt.jpg"/></div>
                <div class="overlay"><div><div class="bt1"></div><div class="bt2"></div></div></div>

    </li>
     <li>
<div class="image"><img src="https://i.sstatic.net/rOVDt.jpg"/></div>
                <div class="overlay"><div><div class="bt1"></div></div></div>

    </li>       
</ul>

.image{
    width:100px;
    height:100px;
}

.overlay{
    width:100%;
    height:100%;
    display:none;
    position:absolute;
    top:0px;
    left:0px;

    background-color:black;
    opacity:0.75;    
}

.overlay > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}

ul { list-style: none; width: 100%; }
ul li { position:relative;display:inline-block; width:150px;height:150px;}

li:hover .overlay {
    display:block;
}

.bt1 {
    background-color:orange;
    width:80px;
    height:80px;
}
.bt2 {
    background-color:green;
    width:50px;
    height:50px;
}

Answer 8

After stumbling upon this question, I decided to craft my own solution using flexbox. The result is a more aesthetically pleasing centering of the buttons!

Check out my solution on CSSDeck

<ul>
    <li>
        <div class="image"><img src="https://i.sstatic.net/rOVDt.jpg"/></div>
        <div class="overlay"><div><div class="bt1"></div><div class="bt2"></div></div></div>
    </li>
    <li>
<div class="image"><img src="https://i.sstatic.net/rOVDt.jpg"/></div>
                <div class="overlay"><div><div class="bt1"></div><div class="bt2"></div></div></div>

    </li>
     <li>
<div class="image"><img src="https://i.sstatic.net/rOVDt.jpg"/></div>
                <div class="overlay"><div><div class="bt1"></div></div></div>

    </li>       
</ul>

.image{
    width:100px;
    height:100px;
}

.overlay{
    width:100%;
    height:100%;
    display:none;
    position:absolute;
    top:0px;
    left:0px;

    background-color:black;
    opacity:0.75;    
}

.overlay > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}

ul { list-style: none; width: 100%; }
ul li { position:relative;display:inline-block; width:150px;height:150px;}

li:hover .overlay {
    display:block;
}

.bt1 {
    background-color:orange;
    width:80px;
    height:80px;
}
.bt2 {
    background-color:green;
    width:50px;
    height:50px;
}

What is the best method to add an overlay div onto another div when hovered, with a grid-style layout?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Press the button to reveal the hidden Side Menu as it gracefully slides out

Customize Monaco Editor: Implementing Read-Only Sections

What is the reason that my "width: auto" property is not properly adjusting to the content's width?

Using the `map()` method in React's array

Using SVG background images in Internet Explorer versions 7 and 8: a guide to HTML, CSS,

Transitioning from pop-up modals to AngularJS JSON

:hover doesn't fully implement background color on list items

Having trouble triggering a change event within a React component?

Building a custom React carousel using visibility logic starting from the ground up

Problem with single-table layout in DynamoDB and constraints on query parameters

Suggestions for resolving the "Undefined" problem in my JQuery Ajax web service request

Sorting feature fails to function properly when used in combination with pagination and

The distance calculation is not functioning properly within the for loop

Learn how to keep sessionStorage state synchronized across ReactJS components

I am encountering an issue with the functionality of my button display and hide feature in my code

The Google API is experiencing issues when using input that has been added on

What is the best way to provide a static file to an individual user while also sharing its file path

When attempting to install an npm package from a local directory, I encountered a 404 Not Found error, despite the package existing in the node_modules directory

Scroll positioning determines the height of an entity

Encountering a problem when using the routingService to navigate inside a JavaScript function