CSS Hover Effects | Fade in Text with Background Source Code

Published on: May 2, 2017 Filed under: CSS, Web Design

Fade in Text with Background Source Code


<!DOCTYPE html>
<html>
<head>
<title>CSS hover effects: Fade in text with background</title>
<style>
.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
}
</style>
</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>

Tagged in


Leave a Reply

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