Transformaciones después de un display block.

[Rafael]

A ver si me pueden ayudar. Estoy jugando con transformaciones que arranquen después de aparecer un objeto al pasar encima de un link.

Código HTML:

<style>
.aparece {
    background: transparent;
    width: 500px;
    height: 500px;    
/*    display: none; */
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
transition-delay: .5s;}
 
a:hover div.aparece {
    background-color: Red;
    display: block;
    opacity: .8;}
 
</style>
 
<a href="#">Aparece <div class="aparece">Aqui estoy</div></a>
 

Al pasar el mouse encima del texto Aparece, la opacidad cambia.

Pero el problema es que de inicio lo necesito con display: none (quitar el comentario) y entonces no funciona el efecto transición.


¿Alguna idea?

[Rafael]

¿Será muy tonto ponerle width: 0px y height: 0px en lugar de desaparecerlo de inicio?

Edito: No es tan mala idea. Puse al contenedor

height: 0; y overflow: hidden;
y luego simplemente overflow: visible;

Pero a ver si se les ocurre alguna otra alternativa.

[pzin]

No sé si te valdrá, pero para los menus lo que suele hacerse es usar visibility, posiciones relativas y absolutas y trastear un poco con el delay:

Código CSS:

a {
  position: relative;
}
 
.aparece {
  position: absolute;
  visibility: hidden;
  width: 500px;
  height: 500px;
  opacity: 0;
  transition: visibility 0 linear 1s, opacity 1s;
  /*
  O ansina:
  transition-property: visibility, opacity;
  transition-duration: 0, 1s;
  transition-delay: 1s, 0;
  */
}
 
a:hover div.aparece {
  visibility: visible;
  background-color: Red;
  opacity: .8;
  transition-delay: 0;
}
 

[Rafael]

Pero ¿visibility no ocupa espacio?
Se anula esto con el position absolute, ¿cierto?

[pzin]

Si exacto. Por eso te decía que suele usarse en menús y no sé si te serviría porque igual necesitas que div.aparece siga en el flujo natural.

Se me ocurre que si quieres que siga manteniendo el espacio pero que no sea afectado por el :hover, podrías ponerlo como hermano y luego usar el selector de "hermano directo": ~. Es como el selector +, que afecta a hermanos —descendientes siempre—pero sólo si viene justo a continuación.

Código HTML:

<a href="#">Aparece</a>
<div class="aparece">Aqui estoy</div>
 

Código CSS:

a:hover ~ div.aparece {}
 

Lo demás sería igual, pero eliminando el posicionado.

[pzin]

En realidad acabo de decir una tontería ¿no? Si pensabas ocultarlo es que no querías que ocupara espacio, obviamente.

Entonces tal vez, en lugar de hacerlo mediante height como decías, hacerlo tal cual en #3, y cambiar la posición en el :hover a relativa.

Supongo que depende mucho del contexto en el que quieras usarlo.

[Rafael]

Fijate que sí probé el visibility hidden + position abolute

Como que me imaginaba que iba a quedar por ahí encima de alguien, pero sí funcionó.

Thx.