CSS Hover Effects: Slide in Text from the Bottom with Background Overlay

css hover effects: Slide in text from the bottom with background

This video is going to show you how to create a CSS Hover Effects: Slide in Text from the Bottom with Background Overlay

 

The HTML

<div class="wrapper">
<img src="relax.jpeg">
<div class="overlay">
<div class="content">
slide in <span> from the bottom </span>
</div>
</div>
</div>

 

The CSS

.wrapper{
font-family: sans-serif;
width: 80%;
margin: 0 auto;
position: relative;
}
img{
display:block;
width:100%;
height: auto;
}
.content{
position: absolute;
top: 45%;
left: 45%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #fff;
text-transform: uppercase;
font-size:60px;
white-space: nowrap;
overflow: hidden;

}
.content span{
font-size:24px;
display: block;
}
.overlay{
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #8466ff;
width: 100%;
height: 0;
transition: .5s ease;
overflow: hidden;
}
.wrapper:hover .overlay{
height: 100%
}

Hi, did you know that we have a youtube channel? It's called Garnatti one. Check it out!
I believe that education must be free to everyone. Feel free to share.

Leave a comment

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