automatic zoom in the image

Asked

Viewed 501 times

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>

So. For the effect of zoom occurs, it is necessary to pass the mouse over the imagem.

What I’d like to do is that efeito occur automatically. In fact, these images are inside a slideshow. That’s why I need it to be automatic.

Some 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’s not cool because when the end comes, it goes back to the original zoom and was not to go back beyond that also the zoom is made 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

  • Include the slide in your question

  • done! I added at the end of the question!

  • at what point should the zoom take place? each time an image stops in the middle?

1 answer

1


To prevent animation from returning to its initial state, simply add .zoom img the code 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>

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

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

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>

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

  • cool! In the first slider, any chance to add the buttons back and forward?

  • @Carlosrocha added a new example

  • Not to be boring, but already being. This new example is waiting for the click on next or Prev to change the slide. I wish that, although it had the buttons, the auto play continued!

  • @Carlosrocha Just copy the code $("#prev") and $("#next") and add to example #1.

  • OK, thank you very much.

  • So, just one last thing: how to make an image the effect is zoomIn and in the next zoomOut sequentially? Vi that made zoonIn within zoomOut function but did not work.

  • @Carlosrocha Not to pollute, even more, the example above. I decided to publish a code the part in jsfiddle. https://jsfiddle.net/wLuv4ezp/

  • Hi, another situation has arisen here. I would like to put a title in each photo. Kind of a description, a label. But then it would be necessary to harvest each group, photo-label inside a div or something. And this way I’m losing the properties and is giving slide error. Could you do another jsfiddl with this change please? I’ll even try and visualize my attempt at http://funerariasaopedro.net.br/novo/index6.php

  • @Carlosrocha creates another question not to get too out of the "auto zoom" subject. This can lead moderators to close the topic. Anything marks me in the comment box of the other question.

  • Okay, done https://answall.com/questions/296263/erros-em-slide-show

Show 5 more comments

Browser other questions tagged jquery css css3

You are not signed in. Login or sign up in order to post.