Skip to main content
Al insertar código HTML/JavaScript/CSS, por favor usa el botón para cargar snippets
Origen Enlace
Mariano
  • 24.5k
  • 20
  • 76
  • 105

Hay una forma de hacerlo, mucho masmás simple y eficiente, y es usando las bondades del css. Aqui te va un ejemplo, puedes copiarlo en un archivo .html y agregarle las imagenes a tu gusto para que veas como queda y si es la respuesta que andas buscando no olvides dar un voto a favor. Espero que te sirva.

<style>
    
.gallery {
    width: 100%;
}

.imgContainer {

    display: inline-block;
    background-color: black;
    height: 200px;
    width: 25%;
    overflow: hidden;
    
}

.hoverEffect {
    
    height: 100%;
    width: 100%;
    opacity: 0.6;
    transition: all 500ms;
    
}

.hoverEffect:hover {
       
    opacity: 1;
    transform: scale(1.1);
    
}

</style>

<div class="gallery">
    <div class="imgContainer">
        <img class="hoverEffect" src="a.jpg">
    </div>

    <div class="imgContainer">
        <img class="hoverEffect" src="b.jpg">
    </div>

    <div class="imgContainer">
        <img class="hoverEffect" src="c.jpg">
    </div>

    <div class="imgContainer">
        <img class="hoverEffect" src="d.jpg">
    </div>

    <div class="imgContainer">
        <img class="hoverEffect" src="e.jpg">
    </div>

</div>

.gallery {
  width: 100%;
}
.imgContainer {
  display: inline-block;
  background-color: black;
  height: 200px;
  width: 25%;
  overflow: hidden;
}

.hoverEffect {
  height: 100%;
  width: 100%;
  opacity: 0.6;
  transition: all 500ms;
}
.hoverEffect:hover {
  opacity: 1;
  transform: scale(1.1);
}
<div class="gallery">
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/UmOcd.png">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/PF6aN.jpg">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/x4kFg.jpg">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/DDWHD.jpg">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/wl4Fq.jpg">
  </div>
</div>

Hay una forma de hacerlo, mucho mas simple y eficiente y es usando las bondades del css. Aqui te va un ejemplo, puedes copiarlo en un archivo .html y agregarle las imagenes a tu gusto para que veas como queda y si es la respuesta que andas buscando no olvides dar un voto a favor. Espero que te sirva.

<style>
    
.gallery {
    width: 100%;
}

.imgContainer {

    display: inline-block;
    background-color: black;
    height: 200px;
    width: 25%;
    overflow: hidden;
    
}

.hoverEffect {
    
    height: 100%;
    width: 100%;
    opacity: 0.6;
    transition: all 500ms;
    
}

.hoverEffect:hover {
       
    opacity: 1;
    transform: scale(1.1);
    
}

</style>

<div class="gallery">
    <div class="imgContainer">
        <img class="hoverEffect" src="a.jpg">
    </div>

    <div class="imgContainer">
        <img class="hoverEffect" src="b.jpg">
    </div>

    <div class="imgContainer">
        <img class="hoverEffect" src="c.jpg">
    </div>

    <div class="imgContainer">
        <img class="hoverEffect" src="d.jpg">
    </div>

    <div class="imgContainer">
        <img class="hoverEffect" src="e.jpg">
    </div>

</div>

Hay una forma de hacerlo, mucho más simple y eficiente, y es usando las bondades del css

.gallery {
  width: 100%;
}
.imgContainer {
  display: inline-block;
  background-color: black;
  height: 200px;
  width: 25%;
  overflow: hidden;
}

.hoverEffect {
  height: 100%;
  width: 100%;
  opacity: 0.6;
  transition: all 500ms;
}
.hoverEffect:hover {
  opacity: 1;
  transform: scale(1.1);
}
<div class="gallery">
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/UmOcd.png">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/PF6aN.jpg">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/x4kFg.jpg">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/DDWHD.jpg">
  </div>
  <div class="imgContainer">
    <img class="hoverEffect" src="https://i.sstatic.net/wl4Fq.jpg">
  </div>
</div>

Origen Enlace
Isaac Vega
  • 719
  • 3
  • 11

Hay una forma de hacerlo, mucho mas simple y eficiente y es usando las bondades del css. Aqui te va un ejemplo, puedes copiarlo en un archivo .html y agregarle las imagenes a tu gusto para que veas como queda y si es la respuesta que andas buscando no olvides dar un voto a favor. Espero que te sirva.

<style>
    
.gallery {
    width: 100%;
}

.imgContainer {

    display: inline-block;
    background-color: black;
    height: 200px;
    width: 25%;
    overflow: hidden;
    
}

.hoverEffect {
    
    height: 100%;
    width: 100%;
    opacity: 0.6;
    transition: all 500ms;
    
}

.hoverEffect:hover {
       
    opacity: 1;
    transform: scale(1.1);
    
}

</style>

<div class="gallery">
    <div class="imgContainer">
        <img class="hoverEffect" src="a.jpg">
    </div>

    <div class="imgContainer">
        <img class="hoverEffect" src="b.jpg">
    </div>

    <div class="imgContainer">
        <img class="hoverEffect" src="c.jpg">
    </div>

    <div class="imgContainer">
        <img class="hoverEffect" src="d.jpg">
    </div>

    <div class="imgContainer">
        <img class="hoverEffect" src="e.jpg">
    </div>

</div>