CSS3 Hover Effects

Metode sederhana ini memungkinkan kita untuk membuat efek hover, dimana transisi diterapkan pada setiap gambar. kita dapat membuat tampilan class induk, dan isi di dalamnya. Kemudian kita juga dapat membuat class mask di mana kita bisa menerapkan CSS3 transisi untuk mendapatkan efek hover. Dalam hal ini kita bisa menerapkan property apapun tergantung pada efek yang kita inginkan.

D E M O

Letakan Cursor pada gambar...



<style>
.efecto1 img {
opacity:1;
-moz-transform:scale(1,1);
-webkit-transform:scale(1,1);
-o-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1);
}
.efecto1 .mask {
border-color:rgba(0,0,0,0.7) transparent transparent transparent;
border-style:solid;
border-width:150px;
height:0;
opacity:0;
width:0;
-moz-transform:translateY(-125px);
-webkit-transform:translateY(-125px);
-o-transform:translateY(-125px);
-ms-transform:translateY(-125px);
transform:translateY(-125px);
}
.efecto1:hover img {
opacity:0.7;
-moz-transform:scale(2,2);
-webkit-transform:scale(2,2);
-o-transform:scale(2,2);
-ms-transform:scale(2,2);
transform:scale(2,2);
}
.efecto1:hover .mask {
opacity: 1;
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
</style>


<style>
.efecto2 .mask {
border: 0 solid rgba(0, 0, 0, 0.7);
opacity: 0;
}
.efecto2:hover .mask {
border-width: 101px;
opacity: 1;
}
</style>


<style>
.efecto3 .mask {
border-radius: 50px;
border: 50px solid rgba(0, 255,255, 0.3);
display: inline-block;
height: 100px;
left:101px;
opacity:1;
position:absolute;
top:50px;
width: 100px;
-moz-transform:scale(4);
-webkit-transform:scale(4);
-o-transform:scale(4);
-ms-transform:scale(4);
transform:scale(4);
}
.efecto3:hover .mask {
border:0px solid rgba(0, 255,255, 0.3);
opacity: 0;
}
</style>


<style>
.efecto4 img {
opacity:0.2;
}
.efecto4 .mask {
border:100px solid rgba(255, 255, 0, 0.1);
opacity:1;
}
.efecto4:hover .mask {
border:0px double rgba(0, 0, 0, 0.5);
opacity:0;
}
.efecto4:hover img {
opacity:1;
}
</style>

HTML Markup

Untuk membuatnya kita memerlukan struktur dengan syntax seperti berikut ini:

<div class="view efecto1">
<img src="images/1.jpg" />
<div class="mask"></div>
<div class="content">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>

CSS

Kita dapat menggabungkan berbagai efek ke dalam satu file CSS.

<style>
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .contentst {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(../img/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
</style>
Sumber: vagabundia