almost 9 years ago
If you want to change background image and display content on hover effect this code will help you.
lets say if you want to show a content only when you move a cursor on an image div, and when image changes it will display the content or description of the image which is set in the background of first image.
html:
<div class="feature"><img alt="" src="feature01.jpg" /><a href="#"><span class="caption">glass</span> // this is the description of image which will appear when user hover on image //</a></div>
<div class="feature">
<img alt="" src="feature01.jpg" />
<a href="#">
<span class="caption">glass</span> // this is the description of image which will appear when user hover on image //
</a>
</div>css:
.feature{float: left;position: relative;}.feature a {display: block;position: absolute;left:0;right:0;top:0;bottom:0;background:#94C83D;display:none;}.feature img {width: 100%;display: block;}.feature:hover a{display:block;}.feature span {color: #fff;display: none;font-size: 36px;font-weight: 100;letter-spacing: 1px;text-indent: 4%;text-transform: uppercase;width: 100%;position:absolute;top:40%;display:block;}
.feature{
float: left;
position: relative;
}
.feature a {
display: block;
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
background:#94C83D;
display:none;
}
.feature img {
width: 100%;
display: block;
}
.feature:hover a{
display:block;
}
.feature span {
color: #fff;
display: none;
font-size: 36px;
font-weight: 100;
letter-spacing: 1px;
text-indent: 4%;
text-transform: uppercase;
width: 100%;
position:absolute;
top:40%;
display:block;
}
0 Comment(s)