Автоматическое масштабирование изображения с простым и из

Question

Может кто-нибудь сказать мне, как я могу сделать что-то подобное на этой странице:

marriottgrandcaymanbeachhouse.com

я хочу сделать, как на этом сайте, автоматический зум моих изображений без зависании или нажмите. Простота и масштабирование функции, которая бесконечна.

Я использую этот класс, но я не знаю, как его активировать.

.zoom.visible > img { 
    -webkit-animation-duration: 30s; 
    animation-duration: 30s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
    -webkit-animation-name: move; 
    animation-name: move; 
    animation-direction: alternate; 
    -moz-animation-direction: alternate; 
    -webkit-animation-direction: alternate; 
    -o-animation-direction: alternate; 
    -ms-transform-origin: middle center; 
    transform-origin: middle center; 
    -webkit-transform-origin: middle center; 
    -o-transform-origin: middle center; 
    -moz-transform-origin: middle center; 
} 

К сожалению, я dont`t знаю, что искать в гугле, и я надеюсь, что некоторые из них могут помочь подтолкнуть меня в правильном направлении или имеет пример кода для меня.

Answer 1

Копирование необходимых частей вне сайта, это то, что вам нужно

CSS:

.zoom.visible > img { 
    -webkit-animation-duration: 30s; 
    animation-duration: 30s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
    -webkit-animation-name: move; 
    animation-name: move; 
    animation-direction: alternate; 
    -moz-animation-direction: alternate; 
    -webkit-animation-direction: alternate; 
    -o-animation-direction: alternate; 
    -ms-transform-origin: middle center; 
    transform-origin: middle center; 
    -webkit-transform-origin: middle center; 
    -o-transform-origin: middle center; 
    -moz-transform-origin: middle center; 
} 
.zoom > img { 
    height: auto!important; 
    width: 100%!important; 
} 

@-webkit-keyframes move { 
    from { 
    transform: scale(1); 
    text-indent: -9999px; 
    ms-transform: scale(1); 
    -webkit-transform: scale(1); 
    -o-transform: scale(1); 
    -moz-transform: scale(1); 
    } 
    to { 
    transform: scale(1.15); 
    -ms-transform: scale(1.15); 
    -webkit-transform: scale(1.15); 
    -o-transform: scale(1.15); 
    -moz-transform: scale(1.15); 
    } 
} 
@keyframes move { 
    from { 
    transform: scale(1); 
    -ms-transform: scale(1); 
    -webkit-transform: scale(1); 
    -o-transform: scale(1); 
    -moz-transform: scale(1); 
    } 
    to { 
    transform: scale(1.15); 
    -ms-transform: scale(1.15); 
    -webkit-transform: scale(1.15); 
    -o-transform: scale(1.15); 
    -moz-transform: scale(1.15); 
    } 
} 

Который работает на изображение с той же HTML структуру, как это:

<div class="zoom visible imagen1" style="opacity: 1; margin-top: 0px; height: 678px;"> 
    <img src="http://placehold.it/800x600" alt="" /> 
</div> 

Демонстрация: http://jsfiddle.net/9hwk7jtu/