CSS Transform

Zoom Image on Hover

by Mohammad Faisal

HTML

<a href='#' class='scale'><img src='https://www.google.com/images/srpr/logo11w.png'/></a>

<a href='#' class='scale'><img src='https://www.google.com/images/srpr/logo11w.png'/></a>

CSS

a{
    transition: all 0.3s ease;
}
a:hover img{
    transform: scale(1.2); 
    -ms-transform: scale(1.2); /* IE 9 */
    -moz-transform: scale(1.2); /* Firefox */
    -webkit-transform: scale(1.2); /* Safari and Chrome */
    -o-transform: scale(1.2); /* Opera */
    box-shadow: 0px 0px 5px #000;
}