Estoy tratando de poner dos imágenes una encima de la otra y luego desvanecerlas al pasar el mouse ... sin embargo, no puedo alinearlas correctamente. ¿Cuál es la mejor manera de hacer esto? Es difícil porque he centrado la primera imagen y está dentro de una celda ... Estoy tratando de alinear las del cuadro 1

.logo1 {
background-image: url("http://res.cloudinary.com/pisojjj/image/upload/v1481695899/ACE-white_pcfefd.png");
    width: 400px;
    height: 100%;
    background-size:contain;
    background-repeat: no-repeat;
     margin: 0 auto;
    padding: 10px;
    position: relative;
    opacity: 1;
    -webkit-transition: all 800ms ease-in-out;
    -moz-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
}
    .logo1bg {
        background-image: url("http://res.cloudinary.com/pisojjj/image/upload/v1481695899/Ace-colour_qjb911.png");
        background-repeat: no-repeat;
        width: 400px;
        height: 100%;
        margin: 0 auto;
        padding: 10px;
        position: absoulte;
        top: 0;
        left: 0;
    }

Codepen ayudará mucho con esto. http://codepen.io/pisoj1/pen/dOgjmJ

También tengo una solicitud si alguien sabe cómo hacerlo rápidamente cuando mira el bolígrafo ... cuando responde, box1 es actualmente el cuadro superior central que se coloca en la parte superior de la pila ... quiero que box5 haga eso ahora en lugar de box1, ¿alguna sugerencia sobre cómo hacer eso? Gracias

0
yoyo 14 dic. 2016 a las 09:26

2 respuestas

La mejor respuesta

Puede eliminar el segundo div y poner el cambio de la imagen de fondo de .logo1 al pasar el cursor

.box1:hover .logo1 {
  background-image: url("http://res.cloudinary.com/pisojjj/image/upload/v1481695899/Ace-colour_qjb911.png");
  -webkit-transition: all 1000ms ease-in-out;
  -moz-transition: all 1000ms ease-in-out;
  -o-transition: all 1000ms ease-in-out;
  transition: all 1000ms ease-in-out;
}

http://codepen.io/anon/pen/WoaKLe

1
XYZ 14 dic. 2016 a las 06:41

¿Por qué agregaste background-size: contain;?

Lo he modificado, revisa Codepen

.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9 {
    width: 400px;
    height: 100%;

    background-repeat: no-repeat;
     margin: 0 auto;
    padding: 10px;
    position: absolute;
    opacity: 1;
    -webkit-transition: all 800ms ease-in-out;
    -moz-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
}

http://codepen.io/anon/pen/RoeBve?editors=1100

0
Andy 14 dic. 2016 a las 11:46