I have created a code snippet that displays a caption with a semi-transparent red overlay when hovering over an image:
HTML:
<a href="http://www.domain.com/">
<div class="thumb">
<img src="http://www.domain.com/thumbnail.jpg" width="100" height="100" alt="" />
<div>
<span>Caption</span>
</div>
</div>
</a>
CSS:
.thumb {
position: relative;
}
.thumb div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fe0000;
color: #fff;
opacity: 0;
transition: opacity 0.5s;
}
.thumb img {
display: block;
}
.thumb div span {
display: block;
position: absolute;
bottom: 10px;
left: 10px;
font-size: 30px;
}
.thumb:hover div {
opacity: 0.3;
}
I would like to change this code so that the caption is not semi-transparent but opaque when hovering over the image. Can anyone provide suggestions on how to accomplish this?