CSS3 Rotate and Scale

Zooms and rotates an image on hover

by davidpauljunior

HTML

<div class="feature">
    <ul>
        <li>
            <a href="#"><img src="http://placehold.it/200x200"/></a>
        </li>
    </ul>
</div>

CSS

.feature ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature ul li a {
    border: solid gray;
    border-width: 1px;
    display: inline-block;
    overflow: hidden;
}

.feature ul li a img {
    vertical-align: top;
    transition: 250ms;
}

.feature ul li a:hover img {
    transform: scale(1.2) rotate(10deg);
    -webkit-transform: scale(1.2) rotate(10deg);
}