Tenho o seguinte código:
.zoom {
overflow: hidden;
}
.zoom img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.zoom:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.text-item {
position: absolute;
left: 5%;
right: 5%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #ffffff;
text-align: center;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
<div class="zoom">
<img src="http://www.funerariasaopedro.net.br/novo/_img/fachada.jpg" class="img-responsive">
<div class="text-item">
<h2>Fachada Funerária</h2>
</div>
</div>
Então. Para quer o efeito de zoom
ocorra, é necessário passar o mouse por cima da imagem
.
O que eu gostaria de fazer é que esse efeito
ocorra automaticamente.
Na verdade, essas imagens estão dentro de um slideshow
. Por isso preciso que fosse automático.
Alguma ideia? Este é o slide:
<div class="cycle-slideshow"
data-cycle-fx=fadeout
data-cycle-timeout=5000
data-cycle-pause-on-hover="true"
data-cycle-slides="div.slide">
<!-- prev/next links -->
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<div class="cycle-pager"></div>
<div class="slide"> <img src="_img/fachada.jpg" /> </div>
<div class="slide"> <img src="_img/_banner/_site/bg_10.jpg" /> </div>
<div class="slide"> <img src="_img/_banner/_site/bg_1.jpg" /> </div>
<div class="slide"> <img src="_img/_banner/_site/bg_2.jpg" /> </div>
<div class="slide"> <img src="_img/_banner/_site/bg_3.jpg" /> </div>
<div class="slide"> <img src="_img/_banner/_site/bg_4.jpg" /> </div>
<div class="slide"> <img src="_img/_banner/_site/bg_5.jpg" /> </div>
<div class="slide"> <img src="_img/_banner/_site/bg_6.jpg" /> </div>
<div class="slide"> <img src="_img/_banner/_site/bg_7.jpg" /> </div>
<div class="slide"> <img src="_img/_banner/_site/bg_8.jpg" /> </div>
<div class="slide"> <img src="_img/_banner/_site/bg_9.jpg" /> </div>
</div>
até cheguei a tentar o estilo abaixo mas não fica legal pois quando chega o final, ele volta para o zoom original e não era para voltar além de que também o zoom é feito muito tumultuado.
.zoom {
overflow: hidden;
}
.zoom img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
animation: zoom 1s;
}
@keyframes zoom {
0% {
transform: scale(1);
}
10% {
transform: scale(1.01);
}
20% {
transform: scale(1.02);
}
30% {
transform: scale(1.03);
}
40% {
transform: scale(1.04);
}
50% {
transform: scale(1.05);
}
60% {
transform: scale(1.06);
}
70% {
transform: scale(1.07);
}
80% {
transform: scale(1.08);
}
90% {
transform: scale(1.09);
}
100% {
transform: scale(1.10);
}
}