Css transition no me funciona en div anidados

Hola a tod@s:

Tengo este código y no me funcionan las transition, lo demás si.¿Alguien me puede echar una mano? Gracias!

En HTML:


<div class="garaje">
<img src="imágenes/botón%20garage.jpg" height=198em">
<div class="oculto detrastrona" style="black">
<div class="fig1">
<a href="https://www.facebook.com/">
<img src="imágenes/facebook-64x64.png"></a>
</div>
<div class="fig2">
<a href="https://twitter.com/">
<img src="imágenes/twitter-64x64.png"></a>
</div>
</div>
</div>

En CSS:

* > .oculto {
display: none;
background-color:black;
}
*:hover > .oculto {
display: block;
position: absolute;
}
body { background-color: gray;
max-width:1800px;
}
img{
display:block;
margin:auto;
}

.detrastrona{
width:50em;
height:12.7em;
position:absolute;
top:0.1%;
}

.garaje{

height:12.5em;
width:50em;
position:absolute;
left:42.2em;
top:27em;
margin-left:-25em;
}

.fig1{
float: left;
margin-top:4em;
margin-left:10em;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.fig2{
margin-top:4em;
margin-right:15em;
}

.fig1 img:hover{
height:80px;
width:80px;
}
.fig2 img:hover{
height:80px;
width:80px;
}

1 Respuesta

Respuesta
1

Creo que es tan sencillo como que no le has explicado que debe hacer.

Si añado esto:

.fig1:hover {
margin-top:0em;
margin-left:0em;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-Transition: margin 0.5s ease-out;

}

Funciona correctamente al hacer un hover..

Si no es lo que necesitas, dime que efecto quieres conseguir.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas