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;
}