CSS3: Animated image zoom on mouse hover

This entry is part 6 of 13 in the series CSS3

We take a thumbnail photo and animate it to show its full size.

The CSS code here uses a combination of rotate and scale to achieve the animation effects.

This is done without the use of Javascript.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>CSS Transform</title>
    <style>
        body {
            padding: 100px;
            text-align: center;
        }

        img {
            background: #fff;
            border: 1px solid #BFBFBF;
            display: block;
            float: left;
            height: 125px;
            margin: 0 10px 0 0;
            padding: 5px;
            width: 125px;
            position: relative;
            -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
        }

        img:hover {
            -webkit-transform: rotate(10deg) scale(2);
            -moz-transform: rotate(10deg) scale(2);
            -o-transform: rotate(10deg) scale(2);
            -ms-transform: rotate(10deg) scale(2);
            transform: rotate(10deg) scale(2);
        }
    </style>
</head>
<body>

<img src='https://codecrawl.com/code/images/ushuaia1.jpg' alt='Ushuaia'/>

</body>
</html>

The line

position: relative

means that the image position is relative to its parent tag which is the <body> tag.

With the transition statements in line 21,22,23, the animation will be done in a second.  Without these transition effects, it will move to its final position immediately.

Series Navigation<< CSS3: Animated button using transition on mouse hover
CSS3: Flexbox and block content >>