Hola a todos, posiblemente lo que busco hacer es realmente facil, dado que lo he visto muchas veces, pero en este momento no hay caso de que de con la solucion.
Lo que quiero hacer, es hacer hover sobre una imagen y junto con realizar un efecto se agregue otro elemento
HTML:
<div class="block">
<img src="images/2.jpg" />
<div class="footer_block">ASESORIA</div>
<div class="text_block">Esto es una prueba para comprobar la transicion de un texto oculto.</div>
</div>
Siendo -> text_block <- el nuevo elemento a agregar,
CSS:
.footer_block{
width: 324px;
height: 40px;
background-color: rgba(0, 0, 0, 0.6);
margin-top:-54px;
position: absolute;
border-top: 1px solid#1c1c1c;
font-family: 'museo_sans_cyrl100';
font-size: 25px;
text-align: center;
padding-top: 10px;
color: white;
}
.footer_block:hover{
height: 184px;
margin-top: -198px;
cursor: pointer;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
La idea es que el nuevo elemento aparesca junto a la transicion del -> footer_block <-
Cualquier ayuda es bienvenida, de ante mano muchas gracias .