jimmyjacks jimmyjacks - 6 months ago 9
CSS Question

How can I create both image captions and a image overlay with CSS?

Essentially I am trying to recreate the following items (on hover is the image to the right): enter image description here

Which is a screen shot from the following site: https://www.loungelizard.com/
There are a lot of question that just deal with just creating an image overlay or a just an image captions so I thought I it would be a hybrid version of them both.

Here is the code I have so far:

HTML:

<a href="#" class="desc_ImageOverlay">
<img src="http://www.imagesource.com/Doc/IS0/Media/Home2/5/8/7/8/IS09AR776.jpg" class="img-responsive" alt="" />
<div class="desc">
<p class="desc_content">Test</p>
</div>
<span class="OverlayText">
<p>
This is some new test text.
</p>
</span>
</a>


CSS:

div.desc{
bottom: 50%;
color: #fff;
left: 50%;
position: absolute;
width: 100%;
}

.desc_content{
color: orange;
shadow: text-shadow: 2px 2px 5px black;
font-size: 20px;
}

.desc_ImageOverlay {
width:140px;
text-decoration:none;
position:relative;
display:block;
border:1px solid #666;
padding:3px;
margin-right:5px;
float:left;
}

.desc_ImageOverlay span.OverlayText {
visibility:hidden;
position:absolute;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

desc_ImageOverlay:hover span.OverlayText{
visibility:visible;
}


Any help trying to achieve the same result as this site would be appreciated. Here is the codepen that I currently using.

Answer
codepen.io/LordNeo/pen/EyxLXX

There is two divs positioned one on top of the other, on hover, the first one dissapears (opacity:0) revealing the bottom one.