Skip to content Skip to sidebar Skip to footer

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

2 comments for "How to Add a Spinning and Zoom Hover Effect to Photos"

  1. This comment has been removed by the author.

    ReplyDelete
  2. very good information for the developer
    this blog also help the developer to learn code
    Visit programgrab.com!

    ReplyDelete