CSS Image Hover Overlay Effect

Hello, Friends. Today we are going to show you another example of CSS animation. Today we will learn how to create a gradient text overlay effect with HTML and CSS. When we hover over an image, this overlay text effect will appear in front of us with a smooth transition effect. When the hover is lifted, it will go back to its previous state. Before collecting the source code, have a look at the video tutorial below. This will make it easier for you to understand. There are many more such educational videos on our YouTube channel. If you are new to web design, these videos can be useful. If you enjoy the videos then subscribe to our channel.

I hope you watched the whole video. In web design, the hover effect is an animation when the user hovers over a web element. There are different ways in which this animation can be displayed. You can enlarge or shrink or change the color of the image. Not only can this effect be used on images, but it can also be used on other elements on the web. We will only learn to use the hover effect on the images in this post.

Here we have three single divs inside a parent div 'Wrapper'. Each div contains an image div and related content. We used the CSS DisplayGrid property to bring the parent div to the center. Every single div is given a width and the 'box-area' div is given a display-flex property so that the image boxes align side by side. We have given position relative to single div and position absolute to content so that the content can be placed over the image.

The content div element is centered using the flex property. A linear gradient color is applied to the before pseudo-element of the content div to provide a gradient overlay. We have changed some values using CSS media queries to make the snippet responsive.

You May Also like:

CSS Image Hover Overlay Effect [ Source Code ]:

Your first step is to create an HTML document and connect it with an external CSS file. Take the code from the box below and paste it into your file. You can download the code from the button below if you need it. Add your own ideas to it to make it more exciting.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS image hover text overlay</title>
    <link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
      <div class="box-area">
        <div class="single-team">
        
          <img src="img/1.jpg" alt="">
          <div class="content">
            <h3>Person name <span>Web Designer</span></h3>                
          </div>
        
      </div>
      <div class="single-team">
        
          <img src="img/2.jpg" alt="">
          <div class="content">
            <h3>Person name <span>Web Designer</span></h3>               
          
        </div>
      </div>
      <div class="single-team">
        
          <img src="img/3.jpg" alt="">
          <div class="content">
            <h3>Person name <span>Web Designer</span></h3>                
          </div>
        
      </div>
      </div>
    </div>
</body>
</html>

ADD CSS:

body {
	background: linear-gradient(90deg, #0476cd, #1bbff4);
}
.wrapper {
	display: grid;
	place-items: center;
	height: 100vh;
	width: 1170px;
	margin: auto;
}
.box-area {
	display: flex;
}
.single-team {
	width: 33%;
	height: auto;
	margin: 0 15px;
	position: relative;
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
}
.single-team img {
	width: 100%;
	height: 100%;
}
.content {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	color: #fff;
	transform: scale(0, 1);
	transition: transform .2s ease-in-out;
}
.content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	color: #fff;
	background: linear-gradient(45deg, #0476cd, #1bbff4);
}
.single-team:hover .content {
	transform: scale(1, 1);
}
.content>* {
	z-index: 999;
}
.content h3 span {
	display: block;
	font-family: 'Cookie', cursive;
}
.content h3 {
	text-align: center;
	font-family: impact;
	font-size: 30px;
}
@media (min-width: 768px) and (max-width: 991px) {
	.wrapper {
		width: 100%;
	}
	.box-area {
		flex-direction: column;
	}
	.single-team {
		width: 100%;
		margin: 0;
	}
}
@media (max-width: 767px) {
	.wrapper {
		width: 100%;
	}
	.box-area {
		flex-direction: column;
	}
	.single-team {
		width: 100%;
		margin: 0;
	}
}

I hope the code is working for you. When you click on the Load More Button below the website's Homepage, there are more code snippets for you to read. These Code examples can help you learn a new thing. We are very grateful that you came to our website. Feel free to keep visiting and happy coding.

DOWNLOAD CODE

CSS Image Hover Overlay Effect [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS Image Hover Overlay Effect

CSS Image Hover Overlay Effect [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form