14

Estoy tratando de hacer zoom dentro de una imagen que está dentro de un div, todo esto ya lo conseguí pero al hacer hover sobre la imagen solo me da un zoom general y a mi me gustaría que cuando mueva el mouse sobre la imagen el zoom se mueva hacía donde lo dirijo, esto es lo que tengo.

Voy a hacer algunos cambios, tengo el problema de el div no aparece, checando las herramientas de red, puedo ver que la imagen la recibo con status 200, pero no aparece en mi vista.

$(document).ready(function() {

  $('.tile')
    // tile mouse actions
    .on('mouseover', function() {
      $(this).children('.photo').css({
        'transform': 'scale(' + $(this).attr('data-scale') + ')'
      });
    })
    .on('mouseout', function() {
      $(this).children('.photo').css({
        'transform': 'scale(1)'
      });
    })
    .on('mousemove', function(e) {
      $(this).children('.photo').css({
        'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 + '%'
      });
    })
    // tiles set up
    .each(function() {
      $(this)
        // add a photo container
        .append('<div class="photo"></div>')
        // some text just to show zoom level on current item in this example
        .append('<div class="txt"><div class="x">' + $(this).attr('data-scale') + 'x</div>ZOOM ON<br>HOVER</div>')
        // set up a background image for each tile based on data-image attribute
        .children('.photo').css({
          'background-image': 'url(' + $(this).attr('data-image') + ')'
        });
    });
});
.tiles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tile {
  position: relative;
  float: left;
  width: 33.333%;
  height: 100%;
  overflow: hidden;
}

.photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform .5s ease-out;
}

.txt {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 10%;
  left: 0;
  font-family: 'Roboto Slab', serif;
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  cursor: default;
}

.x {
  font-size: 32px;
  line-height: 32px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tiles">
  <div class="tile" data-scale="2.4" width="100%" data-image="https://lorempixel.com/400/800"></div>
</div>

6
  • 6
    te sugerio revisar: codepen.io/ccrch/pen/yyaraz Commented el 24 jul. 2019 a las 18:59
  • 1
    Acá hay otro ejemplo pero es más que nada simulando una lupa. Por ahí te sirve también: mlens.musings.it Commented el 25 jul. 2019 a las 12:51
  • @DiegoAvila hola tu referencia es justo lo que necesito pero no consigo hacer que la imagen se muestre desde data-image del div, crees que podrías postear un ejemplo? Commented el 26 jul. 2019 a las 21:53
  • ¿Quieres hacerlo solo con CSS o considerarías una solución con JS?
    – Alvaro Montoro
    Commented el 28 jul. 2019 a las 20:28
  • @AlvaroMontoro claro que si podemos usar un poco de js Commented el 29 jul. 2019 a las 16:39

2 respuestas 2

2

Referencia tomada de w3s

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*Configura el tamaño del lente:*/
  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*Configura el tamaño del div resultante:*/
  width: 300px;
  height: 300px;
}
</style>
<script>
function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
  result = document.getElementById(resultID);
  /*Creación de Lente:*/
  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /*Inserción de lente:*/
  img.parentElement.insertBefore(lens, img);
  /*Cálculo del radio entre el div resultante y el lente:*/
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /*Configura propiedades del background para el div resultante:*/
  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /*Ejecuta una función cuando alguien mueve el cursor sobre la imagen o el lente:*/
  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /*y también para pantallas táctiles:*/
  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);
  function moveLens(e) {
    var pos, x, y;
    /*previene cualquier otra acción que podría ocurrir cuando se mueve sobre la imagen:*/
    e.preventDefault();
    /*Consigue la posición 'x' e 'y' del cursor :*/
    pos = getCursorPos(e);
    /*Calcula la posición del lente:*/
    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    /*Previene que el lente se posicione fuera de la imagen:*/
    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
    if (x < 0) {x = 0;}
    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
    if (y < 0) {y = 0;}
    /*configura la posición del lente:*/
    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /*muestra lo que el lente "ve":*/
    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*consigue posiciones 'x' e 'y' de la imagen:*/
    a = img.getBoundingClientRect();
    /*Calcula las coordenadas 'x' e 'y' del cursor relativo a la imagen:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*considera cualquier 'scroll' sobre la página:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}
</script>
</head>
<body>

<h1>Image Zoom</h1>

<p>Mouse over the image:</p>

<div class="img-zoom-container">
  <img id="myimage" src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="300" height="240">
  <div id="myresult" class="img-zoom-result"></div>
</div>

<p>The image must be placed inside a container with relative positioning.</p>
<p>The result can be put anywhere on the page, but must have the class name "img-zoom-result".</p>
<p>Make sure both the image and the result have IDs. These IDs are used when a javaScript initiates the zoom effect.</p>

<script>
// Initiate zoom effect:
imageZoom("myimage", "myresult");
</script>

</body>
</html>

0
0

para poder hacerle el zoom debes configurar el width=80% height=80% por ejemplo de la siguiente dentro del div

<div class="tiles">
  <div class="tile" width="100%" height="80% data-image="https://lorempixel.com/400/800"></div>

Algo asi

Ahora en la class tiles poner lo siguiente :

.tiles:hover {
    transform: scale(1.5); 
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.