Hello Everyone we are back with a very simple but an.useful trick where we will show you how to add this CSS Transform Effects on your images when hover. This Effects works on pure CSS So it will not have any impact on your site so your site loading speed will not get effected and this will work only when you mouse over the image which you have selected.
We have This 5 CSS3 3D/2D Combined Transform Effects:
- Zoom-in Effect
- Vertical Spin Effect
- Horizontal Spin Effect
- Zoom-out Effect
- Rotate Effect
Live Demo
If you liked any of the Effects and want to add it to your blogger blog then you need to copy the below given code of the respective Effect and paste it just before ]]></b:skin> tag.
Demo 1 Zoom-in Effect
.ABT-CSS-Effect1-zoom-in img{-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s; -o-transition-duration: 0.8s;transition-duration:0.8s;
}
.ABT-CSS-Effect1-zoom-in img:hover{-webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2);transform:scale(1.2);opacity: 0.8;box-shadow: 10px 10px 5px grey;border-radius: 2px;margin: 0px 0px 0px 10px;}
Demo 2 Vertical Spin Effect
.ABT-CSS-Effect2-3D-Spin-Vertical img{-webkit-transition: transform, 3s;-moz-transition: transform, 3s;-o-transition: transform, 3s;transition: transform, 3s;}
.ABT-CSS-Effect2-3D-Spin-Vertical img:hover{-webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg);transform: rotateY(360deg);opacity: 0.8;}
Demo 3 Horizontal Spin Effect
.ABT-CSS-Effect2-3D-Spin-Horizontal img{
-webkit-transition: transform, 2s;-moz-transition: transform, 2s;-o-transition: transform, 2s;-ms-transition: transform, 2s;transition: transform, 2s;}
.ABT-CSS-Effect2-3D-Spin-Horizontal img:hover{
-webkit-transform:rotate3d(20,0,0,-360deg);-moz-transform:rotate3d(20,0,0,-360deg);-o-transform:rotate3d(20,0,0,-360deg);-ms-transform:rotate3d(20,0,0,-360deg);transform:rotate3d(20,0,0,-360deg);opacity: 0.8;}
Demo 4 Zoom-out Effect
.ABT-CSS-Effect1-zoom-out img{-webkit-transition-duration: 4s; -moz-transition-duration: 4s; -o-transition-duration: 4s;transition-duration: 4s;}
.ABT-CSS-Effect1-zoom-out img:hover{-webkit-transform:scale(0.1); -moz-transform:scale(0.1); -o-transform:scale(0.1);opacity: 0.8;border-radius: 1px;}
Demo 4 Rotate Effect
.ABT-CSS-Effect3-rotation img{
-webkit-transition: transform, 3s; -moz-transition: transform, 3s; -o-transition: transform, 3s;transition: transform, 3s;}
.ABT-CSS-Effect3-rotation img:hover{
-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);opacity: 0.8;}
How To Use After Adding The CSS Code:
To Make it work you need to add this small html code in which you need to add you desired image URL and then it will work like a charm.
If you Choose Demo 1: Zoom-in Effect Use Below Code
<div class="ABT-CSS-Effect1-zoom-in">
<img src="Your-Image_URL" />
</div>
If you Choose Demo 2: Vertical Spin Effect Use Below Code
<div class="ABT-CSS-Effect2-3D-Spin-Vertical">
<img src="Your-Image_URL" />
</div>
If you Choose Demo 3: Horizontal Spin Use Below Code
<div class="ABT-CSS-Effect2-3D-Spin-Horizontal">
<img src="Your-Image_URL" />
</div>
If you Choose Demo 4: Zoom-out Effect Use Below Code
<div class="ABT-CSS-Effect1-zoom-out">
<img src="Your-Image_URL" />
</div>
If you Choose Demo 5: Rotate Effect Use Below Code
<div class="ABT-CSS-Effect3-rotation">
<img src="Your-Image_URL" />
</div>
Change The Yellow Highlighted Text Your-Image_URL With Your Image URL And Then Fianlly See The Effects and Enjoy. And if you want this effect on your Logo.
If you want any of the effect on your Logo Image then add this class to the div or other parent Element of yout logo image which starts with ABT If you are facing any difficulty then contact us or comment here we will help you.
No comments:
Post a Comment