Normally you see beautiful and smooth slideshows created using Flash applications or JavaScript. Dont worry if you dont know how to create beautiful image effects in flash or Java as here is an amazing hover effect which can be created using CSS3. This is really a beautiful hover effect and it works perfectly fine in all updated browsers. Now you can add more fun and attraction in your images by having an outstanding image hover effect. Implementation is really simple; follow these steps.
Beautiful Image Hover Effects Using CSS3
First of All, Check DEMO and for implementation, let me let know, you will have to focus on 2 things. First, CSS and Second is HTML part of your post/web-page.- CSS Part - add this in your style sheet
- HTML part - focus on div classes
- Replace image URLs with your images
- Thats it...
.img{
float:left;
-webkit-transition-duration: 0.5s;
}
.img img{
padding:10px;
border:1px solid #fff;
}
.img:hover{
-webkit-transform:scale(0.8);
-webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
width: 100%;
background-color: rgb(0, 0, 0);
position: absolute;
height: 100%;
opacity:0.6;
cursor:pointer;
-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
height:0%;
}
#img-2:hover .mask{
height:0%;
margin-top:130px;
}
#img-3 #mask-1 {
width:50%;
}
#img-3 #mask-2{
width:50%;
margin-left:211px;
}
#img-3:hover #mask-1{
width:0%;
}
#img-3:hover #mask-2{
margin-left:430px;
width:0%;
}
#img-4:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
}
#img-5:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
-webkit-transform: rotateZ(750deg);
}
float:left;
-webkit-transition-duration: 0.5s;
}
.img img{
padding:10px;
border:1px solid #fff;
}
.img:hover{
-webkit-transform:scale(0.8);
-webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
width: 100%;
background-color: rgb(0, 0, 0);
position: absolute;
height: 100%;
opacity:0.6;
cursor:pointer;
-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
height:0%;
}
#img-2:hover .mask{
height:0%;
margin-top:130px;
}
#img-3 #mask-1 {
width:50%;
}
#img-3 #mask-2{
width:50%;
margin-left:211px;
}
#img-3:hover #mask-1{
width:0%;
}
#img-3:hover #mask-2{
margin-left:430px;
width:0%;
}
#img-4:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
}
#img-5:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
-webkit-transform: rotateZ(750deg);
}
<div class='img' id='img-1'>
<div class='mask'></div>
<img src='Image1 URL here' />
</div>
<div class='img' id='img-2'>
<div class='mask'></div>
<img src='Image2 URL here' />
</div>
<div class='img' id='img-3'>
<div class='mask' id='mask-1'></div>
<div class='mask' id='mask-2'></div>
<img src='Image3 URL here' />
</div>
<div class='img' id='img-4'>
<div class='mask'></div>
<img src='Image4 URL here' />
</div>
<div class='img' id='img-5'>
<div class='mask'></div>
<img src='Image5 URL here' />
</div>
<div class='img' id='img-6'>
<div class='mask'></div>
<img src='Image6 URL here' />
</div>
<div class='mask'></div>
<img src='Image1 URL here' />
</div>
<div class='img' id='img-2'>
<div class='mask'></div>
<img src='Image2 URL here' />
</div>
<div class='img' id='img-3'>
<div class='mask' id='mask-1'></div>
<div class='mask' id='mask-2'></div>
<img src='Image3 URL here' />
</div>
<div class='img' id='img-4'>
<div class='mask'></div>
<img src='Image4 URL here' />
</div>
<div class='img' id='img-5'>
<div class='mask'></div>
<img src='Image5 URL here' />
</div>
<div class='img' id='img-6'>
<div class='mask'></div>
<img src='Image6 URL here' />
</div>
No comments:
Post a Comment