css: hover caption image css3
#feature {
position: relative;
width: 748px;
}
#feature-content{
opacity:0;
position: absolute;
bottom: 0px;
left: 0;
height: 100px;
width: 90%;
color:#fff;
background-color:rgba(0,0,0,.3);
-webkit-transition: all 0.9s ease-in;
-moz-transition: all 0.9s ease-in;
-o-transition: all 0.9s ease-in;
transition: all 0.9s ease-in;
}
#feature:hover #feature-content{
opacity:1;
}
#feature-content h1 {
margin: 0;
padding: 0;
line-height: 100px;
padding: 0 0 0 30px;
font-weight: normal;
font-size: 2.3em;
}
#feature-content a {
float: right;
font-size: .5em;
color: #fff;
text-decoration: none;
text-transform: uppercase;
padding-right: 20px;
}
#feature-content a:hover{
color:red;
}
/*
<div id="feature">
<img src="http://1.bp.blogspot.com/-uhPkL1fGKO4/TrfdU0bBlPI/AAAAAAAACAw/GMl83-EaOgE/s1600/cute_squirrels_phtgrphy_Funzug.org_09.jpg" alt="" />
<div id="feature-content">
<h1>Sweet. Smart. Beautiful. <a href="#" title="Shop Now">Learn more »</a></h1>
</div>
</div>
*/