auto zoom in the image

Question

auto zoom in the image

Navigation

#1 by (1 votes)

1

I have the following code:

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

Then. For both the zoom effect to occur, it is necessary to pass the mouse over imagem .

What I would like to do is that this efeito occurs automatically . In fact, these images are within slideshow . That's why I need it to be automatic.

Any idea ? This is the 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>

I even tried the style below but it does not look cool because when it comes to the end, it goes back to the original zoom and was not to go back but the zoom is also very tumultuous.

.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);     
    }
}

jquery css css3

asked by anonymous 27.04.2018 / 22:37

1 answer

Copy Cells When Identifying Change Worksheet_Change (Excel VB) Select Mysql with an array in a table

score 1 · Accepted Answer

To prevent the animation from returning to the initial state, simply add the .zoom img code to animation-fill-mode: forwards; . This way the animation will be executed only once (without returning to the initial state).

Autoplay example:

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><divclass="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>

Example with buttons:

/* 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><divclass="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>

Or you can use transition to cause the effect.

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><divclass="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>