How to Add a Spinning and Zoom Hover Effect to Photos

How to make an image zoom and rotate effect when hovering using CSS in Blogspot. There's lots of instant CSS to get a neat zoom image effect on hover plus some rotation, scaling, blurring, and more. On much of the modern Web today there is a lot of animation on it. For example a simple animation that enlarges the image when hovering in a frame.

CSS stands for Cascading Style Sheets which have 3 versions, namely CSS1, CSS2 and CSS3. CSS is a rule for arranging several components on a web so that it makes it more structured and uniform. CSS3 is the latest version of CSS that can do many things regarding website design. CSS3 is able to create color animations to 3D animations on website pages.

CSS is very helpful for beautifying the appearance of a website by providing color, box shadow, padding, margin, align, position, etc.

In this article, Technology Sharing will share how to create animated images on hover without using JavaScript. Yep, it's true without using JavaScript and only using CSS. Immediately, please see below

Go to Edit > HTML Mode > Code Postings Put the following code where you want it.

HTML

<div id="effect">
<img src="yourphoto.jpg"/>
</div>

CSS

#effect img {
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
#effect img:hover {
    -o-transform: scale(2) rotate(360deg);
    -moz-transform: scale(2) rotate(360deg);
    -webkit-transform: scale(2) rotate(360deg);
    transform: scale(2) rotate(360deg);
}

DEMO

Share :