Scale Background Image on Hover

HTML

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

CSS

.frame {
    width: 500px;
    height: 500px;
    overflow:hidden;
}

.frame > i  {
    display: block;
    background-image: 
    url("http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc");
    background-position: center center;
    width: 500px;
    height: 500px;
    transition: all .5s ease-in-out;
}

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