1

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);     
    }
}
3
  • Inclua o slide em sua pergunta Commented 27/04/2018 às 20:39
  • feito! Adicionei ao final da pergunta! Commented 27/04/2018 às 20:47
  • em que momento deve ocorrer o zoom? cada vez que uma imagem para no meio?
    – Sam
    Commented 27/04/2018 às 21:06

1 Resposta 1

1

Para evitar que a animação retorne ao estado inicial, basta adicionar em .zoom img o código animation-fill-mode: forwards;. Dessa forma a animação será executada apenas uma vez (sem retornar ao estado inicial).

Exemplo Autoplay:

const images = $("div.zoom img")

function startSlider() {  
  let active = $("div.zoom img.active")
  
  if (!$(active).next().length) {
    active = images[0]
  }
  
  $(active)
    .fadeOut(500, function(){
      $(active).removeClass("active")
          .next()
          .fadeIn()
          .addClass("active")
    })
  
  setTimeout(startSlider, 5000)
}

setTimeout(startSlider, 5000)
.zoom {
    overflow: hidden;
    height:500px;
    position:relative;
    width: 500px;
}

.zoom img {
    max-width: 300px;
    display:none;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    position:absolute;
    top:0;
    left:0;
}

.zoom img.active {
  animation: zoom 1s linear;
  animation-fill-mode: forwards;
}

@keyframes zoom {
    0% {
        transform: scale(1);        
    } 
    100% {
        transform: scale(1.3);     
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="zoom">
	<img src="https://picsum.photos/500/500/?image=585" class="img-responsive active">
  <img src="https://picsum.photos/500/500/?image=586" class="img-responsive">
  <img src="https://picsum.photos/500/500/?image=584" class="img-responsive">
  <img src="https://picsum.photos/500/500/?image=588" class="img-responsive">
  <img src="https://picsum.photos/500/500/?image=591" class="img-responsive">
  <img src="https://picsum.photos/500/500/?image=590" class="img-responsive">
</div>

Exemplo com botões:

/* Imagens */
const images = $("div.zoom img")

$("#prev").click(function(){

  /* Captura o elemento anterior (do elemento ativado) */
  let prev = $("div.zoom img.active").prev();
  
  /**
   * Verifica se há elementos antes do elemento ativado,
   * caso não tenha, captura o último
   */
  prev = prev.length ? prev : images[ images.length - 1 ]
  
  /* Exibe a imagem */
  displayImage(prev)
})

$("#next").click(function(){
  /* Captura o elemento posterior (do elemento ativado) */
  let next = $("div.zoom img.active").next();
  
  /**
   * Verifica se há elementos após do elemento ativado,
   * caso não tenha, captura o primeiro
   */
  next = next.length ? next : images[0]
  
  /* Exibe a imagem */
  displayImage(next)
})

/* Função para exibir as imagens */
function displayImage(next) {
  let active = $("div.zoom img.active")

  $(active)
    .fadeOut(500, function(){
      $(active).removeClass("active")
      $(next).fadeIn()
          .addClass("active")
    })
}
.zoom {
    overflow: hidden;
    height:300px;
    position:relative;
    width: 300px;
}

.zoom img {
    max-width: 300px;
    display:none;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    position:absolute;
    top:0;
    left:0;
}

.zoom img.active {
  animation: zoom 1s linear;
  animation-fill-mode: forwards;
  display: block;
}

@keyframes zoom {
    0% {
        transform: scale(1);        
    } 
    100% {
        transform: scale(1.3);     
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="zoom">
	<img src="https://picsum.photos/500/500/?image=585" class="img-responsive active">
  <img src="https://picsum.photos/500/500/?image=586" class="img-responsive">
  <img src="https://picsum.photos/500/500/?image=584" class="img-responsive">
  <img src="https://picsum.photos/500/500/?image=588" class="img-responsive">
  <img src="https://picsum.photos/500/500/?image=591" class="img-responsive">
  <img src="https://picsum.photos/500/500/?image=590" class="img-responsive">
</div>

<button id="prev">Prev</button>
<button id="next">Next</button>


Ou você pode utilizar transition para causa o efeito.

let scale = 1;

$("#aumentar").click(function(){
  $("div.zoom img").css("transform", "scale("+ (scale+=0.1) +")");
})

$("#diminuir").click(function(){
  $("div.zoom img").css("transform", "scale("+ (scale-=0.1) +")");
})
.zoom {
    overflow: hidden;
}

.zoom img {
    max-width: 300px;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

<button id="aumentar">Aumentar</button>
<button id="diminuir">Diminuir</button>

10
  • bacana! No primeiro slider, alguma chance de adicionar os botões retroceder e avançar? Commented 28/04/2018 às 0:05
  • @CarlosRocha adicionei um novo exemplo Commented 28/04/2018 às 1:48
  • Não querendo ser chato, mas já sendo. Esse novo exemplo fica aguardando o click em next ou prev para trocar o slide. Eu gostaria que, embora tivesse os botões, o auto play continuasse! Commented 28/04/2018 às 2:05
  • @CarlosRocha É só copiar o código $("#prev") e $("#next") e adicionar no exemplo #1. Commented 28/04/2018 às 2:37
  • ok, muito obrigado. Commented 28/04/2018 às 11:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .