como hacer que una transición de “height” en css haga crecer mi div solo hacia arriba?

publicado por: Anonymous

tengo un div al que quiero darle el efecto de crecer al pasar el ratón por encima utilizando las propiedades CSS transitions, pero no se muy bien como funciona, como lo tengo actualmente al pasar el ratón por encima del div este crece pero hacia arriba y hacia abajo, lo que quiero es que mantenga su posición y solo aumente su tamaño hacia arriba, este es mi css:

.calltoaction {
    position: relative;
    height: 8em;
    width: 30em;
    border: solid 2px green;
    margin-left: -30em;
    margin-top: 75vh;
    -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
    transition: height 1s;
    background-color:rgba(43, 34, 68, 0.9);
}
.calltoaction:hover{
    height: 20em;

}

solución

Podrías ponerle una posición absoluta y decirle que está a 25vh del bottom.

_x000D_

_x000D_

.calltoaction {_x000D_
    position: absolute;_x000D_
    height: 8em;_x000D_
    width: 30em;_x000D_
    border: solid 2px green;_x000D_
    margin-left: -30em;_x000D_
    bottom: 25vh;_x000D_
    -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */_x000D_
    transition: height 1s;_x000D_
    background-color:rgba(43, 34, 68, 0.9);_x000D_
}_x000D_
.calltoaction:hover{_x000D_
    height: 20em;_x000D_
_x000D_
}

_x000D_

<div class="calltoaction"></div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *