CSS3 Image Hover

Memasang Gambar dengan effect hover
Menampilkan gambar yang menutupi Link Title dan terlihat kembali ketika cursor menyentuh gambar tersebut,
berikut cara penerapannya : Login ke akun blog klik entri halaman baru HTML copy kode dibawah ini pastekan kedalam halaman baru HTML dan klik simpan selesai

<style>
.Mys2010 {
    position:relative;
    width:250px;
   height:230px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(128,128,128,128)
}
.Mys2010 p,.Mys2010 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.Mys2010 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.Mys2010 h2 {
    font-family:'Lato';
    font-size:20px;
    line-height:24px;
    margin:0;
}
.effect img {
    position:absolute;
    margin:-15px 0;
    right:0;
    top:0;
    cursor:pointer;
    -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
    -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
    -o-transition:top .4s ease-in-out,right .4s ease-in-out;
    transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
    top:-300px;
    right:-300px;
    padding-bottom:200px;
    padding-left:300px
}
</style>
<ul class="Mys2010 effect">
            <p><h2>Your Text</h2></p>
            <p>Your Text</p>

<a href="http://Your Link"title="Your Text"><p>Your Text</a></p>
     <img class="top" src="http://Link Gambar" alt="Mys2010"/>
</ul>

Penjelasan :
Ganti Text dan link yang diwarnai

All Sources
Edited by. Myscript2010

DEMOSHOW