CSS Hover Effects: Slide in Text from the Top with Background

CSS Hover Effects: Slide in Text from the Top with Background

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

The HTML


<div class="wrapper">
<img src="lizard.jpeg">
<div class="overlay">
<div class="content">
Slide in <span> From the Top </span>
</div>
</div>
</div>

 

The CSS


img{
display:block;
width: 100%;
height: auto;

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

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

}
.wrapper:hover .overlay{
bottom: 0;
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 *