Skip to main content
Correcciones ortográficas, formato del código, añadir imágenes para que el ejemplo se vea mejor
Origen Enlace

Estoy intentando crear de mil maneras un menumenú hecho con imagenesimágenes con el efecto hover, pero no entiendo porque no se ve el divdiv completo. Me explico, el menu

El menú consta de 6 imagenesimágenes (que en realidad son doce, dos por imagenopción de menú, por el hover) y deben de verse en dos 'lineas'. Sin embargo, no se porque, y he probado como dije mil maneras,sé por qué se solapan en una sola 'linea' y se acaban por ver tan solo tres...

Os dejo el codigocódigo simplificado por si alguien que entienda ve donde estadónde está el fallo.. Muchisimas gracias de antemano!:

    html, body {
        height: 100%;
    }

    .image-grid {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .image-grid .image {
        width: 33%;
        padding-left: 6px;
    }
 

    .image-grid .image img {
        width: 100%;
    }

    #cf {
        position: relative;
        width: 33%;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #cf img {
        position: absolute;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    #cf img.top:hover {
        opacity: 0;
        height: 350px;
    }
    <section class="image-grid">
        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="weddings" title="weddings" />
            <img class="top" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/1_weddings.jpg"200/people" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="weddings" title="weddings" />
            <img class="top" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="weddings" title="weddings" />
            <img class="top" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/3_corporative.jpg"200/city" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="weddings" title="weddings" />
            <img class="top" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/4_documentals.jpg"200/sports" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="weddings" title="weddings" />
            <img class="top" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/5_originals.jpg"200/cats" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="weddings" title="weddings" />
            <img class="top" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/6_freelancers.jpg"200/abstract" alt="" />
        </a>
    </section>

Estoy intentando crear de mil maneras un menu hecho con imagenes con el efecto hover, pero no entiendo porque no se ve el div completo. Me explico, el menu consta de 6 imagenes (que en realidad son doce, dos por imagen, por el hover) y deben de verse en dos 'lineas'. Sin embargo, no se porque, y he probado como dije mil maneras, se solapan en una sola 'linea' y se acaban por ver tan solo tres...

Os dejo el codigo simplificado por si alguien que entienda ve donde esta el fallo.. Muchisimas gracias de antemano!

    html, body {
        height: 100%;
    }

    .image-grid {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .image-grid .image {
        width: 33%;
        padding-left: 6px;
    }
 

    .image-grid .image img {
        width: 100%;
    }

    #cf {
        position: relative;
        width: 33%;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #cf img {
        position: absolute;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    #cf img.top:hover {
        opacity: 0;
        height: 350px;
    }
    <section class="image-grid">
        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/1_weddings.jpg" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/3_corporative.jpg" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/4_documentals.jpg" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/5_originals.jpg" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/6_freelancers.jpg" alt="" />
        </a>
    </section>

Estoy intentando crear un menú hecho con imágenes con el efecto hover, pero no entiendo porque no se ve el div completo.

El menú consta de 6 imágenes (que en realidad son doce, dos por opción de menú, por el hover) y deben de verse en dos 'lineas'. Sin embargo, no sé por qué se solapan en una sola 'linea' y se acaban por ver tan solo tres.

Os dejo el código simplificado por si alguien que entienda ve dónde está el fallo:

html, body {
  height: 100%;
}

.image-grid {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.image-grid .image {
  width: 33%;
  padding-left: 6px;
}

.image-grid .image img {
  width: 100%;
}

#cf {
  position: relative;
  width: 33%;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#cf img {
  position: absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity: 0;
  height: 350px;
}
<section class="image-grid">
  <a id="cf" href="#" class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/people" />
  </a>

  <a id="cf" href="#" class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/nature" alt="" />
  </a>

  <a id="cf" href="#" class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/city" alt="" />
  </a>

  <a id="cf" href="#" class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/sports" alt="" />
  </a>

  <a id="cf" href="#" class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/cats" alt="" />
  </a>

  <a id="cf" href="#" class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/abstract" alt="" />
  </a>
</section>
Convertido a fragmento de código (aunque falta cambiar las url de las imágenes)
Origen Enlace
Carlos Muñoz
  • 13.5k
  • 2
  • 47
  • 67

estoyEstoy intentando crear de mil maneras un menu hecho con imagenes con el efecto hover.. Pero, pero no entiendo porque no se ve el div completo. Me explico, el menu consta de 6 imagenes (que en realidad son doce, dos por imagen, por el hover) y deben de verse en dos 'lineas'. Sin embargo, no se porque, y he probado como dije mil maneras, se solapan en una sola 'linea' y se acaban por ver tan solo tres...

Aqui el CSS

<style type="text/css">

html,body {height:100%;

}
.image-grid {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.image-grid .image {

        width: 33%;
        padding-left:6px;
        padding-left:6px;
 }
                
        
.image-grid .image img {
            width: 100%;
 }

#cf {
  position:relative;
  width:33%;
  display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}

#cf img {

 position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
 }

#cf img.top:hover {
opacity:0;
height:350px;
}
</style>

Y el HTML

    html, body {
        height: 100%;
    }

    .image-grid {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .image-grid .image {
        width: 33%;
        padding-left: 6px;
    }


    .image-grid .image img {
        width: 100%;
    }

    #cf {
        position: relative;
        width: 33%;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #cf img {
        position: absolute;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    #cf img.top:hover {
        opacity: 0;
        height: 350px;
    }
    <section class="image-grid">
        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/1_weddings.jpg" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/3_corporative.jpg" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/4_documentals.jpg" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/5_originals.jpg" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/6_freelancers.jpg" alt="" />
        </a>
    </section>
<body>

<section class="image-grid">
        
                                         <a id="cf" href="#"  class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/1_weddings.jpg" /></a>

                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="" /></a>
                      
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top"src="wp-content/uploads/2015/12/3_corporative.jpg" alt="" /></a>
                    
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/4_documentals.jpg" alt="" /></a>
                    
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/5_originals.jpg" alt="" /></a>
                       
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/6_freelancers.jpg" alt="" /></a>
                    
</section>
 

estoy intentando crear de mil maneras un menu hecho con imagenes con el efecto hover.. Pero no entiendo porque no se ve el div completo. Me explico, el menu consta de 6 imagenes (que en realidad son doce, dos por imagen, por el hover) y deben de verse en dos 'lineas'. Sin embargo, no se porque, y he probado como dije mil maneras, se solapan en una sola 'linea' y se acaban por ver tan solo tres...

Aqui el CSS

<style type="text/css">

html,body {height:100%;

}
.image-grid {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.image-grid .image {

        width: 33%;
        padding-left:6px;
        padding-left:6px;
 }
                
        
.image-grid .image img {
            width: 100%;
 }

#cf {
  position:relative;
  width:33%;
  display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}

#cf img {

 position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
 }

#cf img.top:hover {
opacity:0;
height:350px;
}
</style>

Y el HTML

<body>

<section class="image-grid">
        
                                         <a id="cf" href="#"  class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/1_weddings.jpg" /></a>

                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="" /></a>
                      
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top"src="wp-content/uploads/2015/12/3_corporative.jpg" alt="" /></a>
                    
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/4_documentals.jpg" alt="" /></a>
                    
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/5_originals.jpg" alt="" /></a>
                       
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/6_freelancers.jpg" alt="" /></a>
                    
</section>

Estoy intentando crear de mil maneras un menu hecho con imagenes con el efecto hover, pero no entiendo porque no se ve el div completo. Me explico, el menu consta de 6 imagenes (que en realidad son doce, dos por imagen, por el hover) y deben de verse en dos 'lineas'. Sin embargo, no se porque, y he probado como dije mil maneras, se solapan en una sola 'linea' y se acaban por ver tan solo tres...

    html, body {
        height: 100%;
    }

    .image-grid {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .image-grid .image {
        width: 33%;
        padding-left: 6px;
    }


    .image-grid .image img {
        width: 100%;
    }

    #cf {
        position: relative;
        width: 33%;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #cf img {
        position: absolute;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    #cf img.top:hover {
        opacity: 0;
        height: 350px;
    }
    <section class="image-grid">
        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/1_weddings.jpg" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/3_corporative.jpg" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/4_documentals.jpg" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/5_originals.jpg" alt="" />
        </a>

        <a id="cf" href="#" class="image">
            <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
            <img class="top" src="wp-content/uploads/2015/12/6_freelancers.jpg" alt="" />
        </a>
    </section>
 

se añadieron 118 caracteres en el cuerpo
Origen Enlace
html,body{height:100%;}.image-grid{display:-moz-flex;display:-webkit-flex;display:-ms-flex;display: flex;-moz-flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}.image-grid.image{width: 33%;padding-left:6px;padding-left:6px;

Aqui el CSS

}.image-grid.image img{width: 100%;
<style type="text/css">

html,body {height:100%;

}
.image-grid {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.image-grid .image {

        width: 33%;
        padding-left:6px;
        padding-left:6px;
 }
                
        
.image-grid .image img {
            width: 100%;
 }

#cf {
  position:relative;
  width:33%;
  display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}

#cf img {

 position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
 }

#cf img.top:hover {
opacity:0;
height:350px;
}
</style>
}#cf{position:relative;width:33%;display:-moz-flex;display:-webkit-flex;display:-ms-flex;display: flex;-moz-flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}#cf img{position:absolute;-webkit-transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-o-transition: opacity 1s ease-in-out;transition: opacity 1s ease-in-out;

Y el HTML

}#cf img.top:hover{opacity:0;height:350px;
<body>

<section class="image-grid">
        
                                         <a id="cf" href="#"  class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/1_weddings.jpg" /></a>

                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="" /></a>
                      
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top"src="wp-content/uploads/2015/12/3_corporative.jpg" alt="" /></a>
                    
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/4_documentals.jpg" alt="" /></a>
                    
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/5_originals.jpg" alt="" /></a>
                       
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/6_freelancers.jpg" alt="" /></a>
                    
</section>
}
html,body{height:100%;}.image-grid{display:-moz-flex;display:-webkit-flex;display:-ms-flex;display: flex;-moz-flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}.image-grid.image{width: 33%;padding-left:6px;padding-left:6px;}.image-grid.image img{width: 100%;}#cf{position:relative;width:33%;display:-moz-flex;display:-webkit-flex;display:-ms-flex;display: flex;-moz-flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}#cf img{position:absolute;-webkit-transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-o-transition: opacity 1s ease-in-out;transition: opacity 1s ease-in-out;}#cf img.top:hover{opacity:0;height:350px;}

Aqui el CSS

<style type="text/css">

html,body {height:100%;

}
.image-grid {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.image-grid .image {

        width: 33%;
        padding-left:6px;
        padding-left:6px;
 }
                
        
.image-grid .image img {
            width: 100%;
 }

#cf {
  position:relative;
  width:33%;
  display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}

#cf img {

 position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
 }

#cf img.top:hover {
opacity:0;
height:350px;
}
</style>

Y el HTML

<body>

<section class="image-grid">
        
                                         <a id="cf" href="#"  class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/1_weddings.jpg" /></a>

                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="" /></a>
                      
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top"src="wp-content/uploads/2015/12/3_corporative.jpg" alt="" /></a>
                    
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/4_documentals.jpg" alt="" /></a>
                    
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/5_originals.jpg" alt="" /></a>
                       
                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/6_freelancers.jpg" alt="" /></a>
                    
</section>
Origen Enlace
Loading