description image hover

by kompiajaib

HTML

<div class="imagebox">
<img alt="thumbnail" height="300" src="http://4.bp.blogspot.com/-wFt-q2gHZ5Q/VCyqvCFVIZI/AAAAAAAAd30/SnqPim5wz9k/s1600/windows-10.png" width="600" title="Capable of seating 50,000 spectators"/>
<div class="imgdescription">
Ini adalah contoh deskripsi gambar dengan hover, <a href="http://www.kompiajaib.com/" title="Contoh Link">Kompi Ajaib</a> ini adalah contoh link dalam deskripsi gambar.
</div>
</div>

CSS

.imagebox{position:relative;width:80%;height:auto;z-index:2;margin:0 auto;padding:0}
.imagebox img{position:relative;z-index:1;transition:all .5s ease-in-out;width:auto;max-width:100%;height:auto}
.imagebox div.imgdescription{position:absolute;width:80%;z-index:2;bottom:-100px;left:50%;margin-left:-42%;padding:2%;text-align:center;background:rgba(0,0,0,0.8);color:white;border-radius:8px;opacity:0;transition:all .5s ease .5s;font-size:100%}
.imagebox div.imgdescription a{color:white;text-decoration:underline}
.imagebox:hover div.imgdescription{bottom:15px;opacity:.8}
@media screen and (max-width:480px){
    .imagebox{width:100%;}
}