I'm experimenting with creating a mouseover effect on images where the background becomes dimmer and text appears on top.
For example, you can take a look at this page and scroll down to see how the second set of images darken and display text when you hover over them.
Initially, I considered changing the image itself on mouseover, but I believe I can achieve the effect using CSS.
HTML
<div id="bottomWide">
<ul>
<li>
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="">
<div>Some text here, style as needed</div>
</li>
<li>
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="">
<div>Some text here, style as needed</div>
</li>
</ul>
</div>
CSS
#bottomWide{
width:100%;
margin:0 auto;
}
#bottomWide ul{
margin:0;
padding:0;
/* For Mouse Over*/
position: relative;
display: inline-block;
}
#bottomWide li{
list-style-type: none;
display: inline-block;
width:50%;
text-align:justify;
float: left;
}
#bottomWide img{
width:100%;
}
#bottomWide li div{
position: absolute;
top: 0;
left: 0;
/* 100% will equal the dimensions of the image, as nothing else will be inside the .container */
width: 100%;
height: 100%;
color: #fff;
background-color: #000;
opacity: 0;
/* This will create the fade effect */
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
/* Include all required vendor prefixes for opacity and transition */
}
#bottomWide li div:hover {
opacity: 0.7;
}