CSS Hover Effects | Fade in Text with Background Source Code

Fade in Text with Background Hover

This video is going to show you how to create a CSS Fade in text with background Hover effect. An image is covered with a solid color fades in with a text when a user hovers it.

The HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="wrapper">
 <img src="animal.jpeg">
 
<div class="overlay">

<div class="content">Fade In<span>Fade In text</span></div>

 </div>

</div>


</body>
</html>

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: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #fff;
text-transform: uppercase;
font-size: 60px;
}

.content span{
font-size: 24px;
display: block
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #ff771d;
}

.wrapper:hover .overlay {
opacity: 1;
}

Fade In Background Opacity(transparent) Hover

The HTML

<!DOCTYPE html>
<html>
<head>
<title>CSS hover effects: Fade In Background opacity</title>
</head>

<body>



<div class="wrapper">
<img src="highland.jpeg">


<div class="overlay">

<div class="content">
the title <a>read more</a>
</div>


</div>


</div>



</body>
</html>

The CSS

.wrapper{
font-family:sans-serif;
width: 80%;
margin: 0 auto;
position:relative;
}
img{
opacity: 1;
display: block;
width:100%;
height: auto;
transition: .5s ease;
}
.content{
position: absolute;
top:45%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-transform: uppercase;
font-size: 60px;
color:#fff;
white-space: nowrap;
overflow: hidden
}
.content a{
font-size: 24px;
display: block;
background-color: #ff771d;
text-align: center;
padding: 10px;
cursor: pointer
}
.overlay{
opacity: 0
}
.wrapper:hover img{
opacity: .5
}
.wrapper:hover .overlay{
opacity: 1
}

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 *