Ampliar foto al hacer clic, ¿manera más fácil?

  • Autor Autor Linton
  • Fecha de inicio Fecha de inicio
L

Linton

Épsilon
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Ya sé que hay plugins de lightbox, pero me gustaría saber si es complicado hacerlo añadiendo un snippet de código. Los visores de fotos privilegian las fotos en formato panorámico y el resto las agrandan menos, yo quiero hacerlo según mis necesidades.
 
Hola Beta!

Primero tienes que colocar este codigo en tu css
HTML: 
input[type=checkbox] {
  display: none;
}

.container img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2);
  cursor: zoom-out;
}

y donde quieras colocar la imagen coloca esto

HTML: 
<div class="container">
  <input type="checkbox" id="zoomCheck">
  <label for="zoomCheck">
    <img src="URL imagen">
  </label>
</div>

Espero haberte ayudado. Un Saludo.
Y recuerda el mejor hosting esta en Administracion - BEST WEB HOSTING
 
iliasrougui dijo:
Hola Beta!

Primero tienes que colocar este codigo en tu css
HTML: 
input[type=checkbox] {
  display: none;
}

.container img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2);
  cursor: zoom-out;
}

y donde quieras colocar la imagen coloca esto

HTML: 
<div class="container">
  <input type="checkbox" id="zoomCheck">
  <label for="zoomCheck">
    <img src="URL imagen">
  </label>
</div>

Espero haberte ayudado. Un Saludo.
Y recuerda el mejor hosting esta en Administracion - BEST WEB HOSTING
Hacer clic para expandir...

Lo he probado y funciona, ¡gracias!
 
¡Muchas gracias a los dos! :smile:
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

A
¿Cómo ampliar imágenes al hacer clic en un blog?
Respuestas
3
Visitas
2K
Julio2201
Julio2201
Atrás
Arriba