Scale Background Image on Hover

by John Doe

HTML

<div class="frame"><i></i></div>

CSS

.frame {
    width: 300px;
    height: 388px;
    overflow:hidden;
    margin: 0 auto;
}

.frame > i  {
    display: block;
    background-image: 
    url("http://www.thrashermagazine.com/imagesV2/Junk_Drawer/2014/06/TH0714Cover_300.jpg");
    background-position: center center;
    width: 300px;
    height: 388px;
    transition: all .4s ease-in;
}

i:hover {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    background-position: center 0;
    cursor:pointer;
}