Creating an overlay info box using HTML & CSS | Dev Six

Creating an overlay info box using HTML & CSS

overlay info box

Hi

Today I read a thread in stackoverflow.com where some one was trying to create an overlay info box using HTML, CSS & jQuery. But he was unable to make it work as expected and asked for help. Then I wanted to try that out but with out using jQuery. Good news is that I got succeeded in doing that and this is how I did it.

HTML

<div class="thumb">
<div class="overlay">
<h3>Project #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati</p>
</div>
<img src="https://www.w3schools.com/w3images/natureboy.jpg" />
</div>
<div class="thumb">
<div class="overlay">
<h3>Project #2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati</p>
</div>
<img src="https://www.w3schools.com/w3images/girl_mountain.jpg" />
</div>

You can see that I have added two <div> elements with a CSS class “thumb” and attached an image and an info box <div> inside each of them. The rest of the magic is done with the CSS

CSS

*{
 font-family:sans-serif;
 font-weight:normal;
 box-sizing:border-box;
}
.thumb{
 width:200px;
 height:auto;
 float:left;
 cursor:pointer;
 position:relative;
}
.thumb img{
 width:100%;
 height:auto;
}
.overlay{
 width:100%;
 height:100%;
 background: #0099cccc;
 position:absolute;
 text-align:center;
 opacity:0;
 color:#fff;
 padding:2%;
}

.thumb:hover .overlay{
 opacity:1;
}

You can see the working code in JsFiddle

Thanks for reading.

Signature
Comments