Zoom image inside a div

Question

Zoom image inside a div

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have a div with images in thumbnails that when I zoomed in on them, I zoomed in on them, the problem is that the ones on the edges go out and do not appear whole, I suppose there has to be some form of css limit the margins of the div and that are enlarged but adapting to it. Going around I can not find anything and I can not think of any more keywords: S

.zoomIt{
    display:inline-block!important;
    -webkit-transition:-webkit-transform 1s ease-out;
    transition:transform 0.5s ease-out;
    margin-top:px;
}
.zoomIt:hover{
    margin-top:;
    -webkit-transform: scale(2);
    transform: scale(2)
}

This is the css with which I zoom in on the image.

css

asked by Fco Linares Garcia 14.09.2018 в 07:27

source

2 answers

Simple redirect with Ajax Get the labels of a JSON

score 2 · Answer 1

Make sure that you do not have overflow: hidden defined in the image container, by default they should look complete:

div img:hover {
	transform: scale(4);
	z-index: 100;
}

div {
  display: inline-table;
  background-color: goldenrod;
  padding: 5px;
}

#recorta {
  overflow: hidden;
}

<div>
<p>Sin overflow definido</p>
<img alt="Demo" src="https://via.placeholder.com/50x50"/>

<img alt="Demo" src="https://via.placeholder.com/50x50"/>



</div>

<div id="recorta">
<p>Con <strong>overflow : hidden</strong></p>
<img alt="Demo" src="https://via.placeholder.com/50x50"/>

<img alt="Demo" src="https://via.placeholder.com/50x50"/>



</div>

score 0 · Answer 2

In my code I use JavaScript and the "zoomIn" happens when I click on the image. you can also click outside the group of images for a "zoomOut" If you do not like the click you can change it for mouseover .

Please read the comments in the JavaScript.

Important: each image has a data-transform_origin attribute to control the transformation of the images.

// el array de las imagenes class .zoomIt
let zit = Array.from(document.querySelectorAll(".zoomIt"));
//Estoy iterando las imágenes con el método map, pero tu puedes utilizar el método que más te guste
zit.map((img) =>{img.addEventListener("click", (e)=>{
// al hacer click en una imagen guardo el valor para transform-origen en una variable
  let to = img.dataset.transform_origin;
  // establecer un estilo comun para todas las imágenes
  zit.map((_img)=>{
    _img.zoom = false;
    _img.setAttribute("style","z-index:0;transform:scale(1);")
  });
  // establecer el estilo de la imagen escogida por el usuario
  img.zoom = true;
  img.setAttribute("style",'z-index:2;transform-origin:${to};transform:scale(1.5);')
})               
})
//si haces click fuera del contenedor todas las imágenes vuelven al estilo original
document.body.addEventListener("click", (e)=>{if(e.target.tagName !== "IMG"){
  zit.map((img)=>{
    let to = img.dataset.transform_origin;
    let zi = img.zoom ? 2 : 0;
    img.setAttribute("style",'z-index:${zi};transform-origin:${to};transform:scale(1);')
  });
}});

*{margin:0;padding:0;}
body{height:100vh;overflow:hidden;}
#contenedor{
  display:flex; 
  flex-wrap:wrap; 
  width:300px;
  height:300px;}

.zoomIt{
    z-index:0;
    flex:0 0 33%;
    width:100px;
    height:100px;
    display:inline-block;
    transform: scale(1);
    transition:transform 1s ease-out;
}

<div id="contenedor">
<img data-transform_origin="0 0" class="zoomIt"  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt ="Darwin" />
  <img data-transform_origin="50% 0"  class="zoomIt" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt ="Darwin" />
  <img data-transform_origin="100% 0" class="zoomIt" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt ="Darwin" />
  
  <img data-transform_origin="0 50%;"  class="zoomIt" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt ="Darwin" /> 
  <img data-transform_origin="50% 50%"  class="zoomIt"  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt ="Darwin" />
  <img data-transform_origin="100% 50%"  class="zoomIt" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt ="Darwin" />
  
  <img data-transform_origin="0 100%"  class="zoomIt" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt ="Darwin" />
  <img data-transform_origin="50% 100%"  class="zoomIt" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt ="Darwin" />
  <img data-transform_origin="100% 100%"  class="zoomIt" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt ="Darwin" />
  <div>

I hope it's useful.