Animated overlay using CSS Animation

CSS animation is a web design method that web developers use to create smooth transitions or effects for HTML elements. To control the animation process, developers use the keyframes and transition properties of CSS animation. CSS animation is easy to implement and has good performance efficiency. This lightweight solution for web design is supported by most modern web browsers. In this CSS animation tutorial, we have designed a CSS animated overlay animation on hover. Watch the video tutorial below to get the complete idea.

Video Tutorial:

We hope you enjoyed the video tutorial above. Cards are container-like elements in web design. They are usually rectangular and organize content into small blocks. Cards play an important role in enhancing the visual appeal, content readability, and user engagement of a website. In this blog post, we have designed three such cards with animated overlay animation on hover effect in it. Considering the importance of responsive web design, we made the snippet responsive as well. Portfolio websites, e-commerce platforms, blogs, photography, and design gallery websites use these cards with animated overlays to display their project details, product descriptions, featured content, captions, and credits, etc.

In today's CSS animation example, we designed three responsive cards. The client's name is written on a white overlay background below each image. When the user hovers over the image, a caption overlay with a blue gradient background color will flip like a curtain and cover the image. The caption overlay will contain some important information about the person in the image, such as their title, short bio, and social media links. The image will return to its previous state after the cursor is moved.

You May Also like:

Animated overlay using CSS Animation [ Source Code ]:

To create the animated overlay animation, we will need to create an HTML file and a CSS file. The entire process is shown in the video tutorial above. After that, Copy the code from the code box below and paste it into your file. After saving the code, open it in your browser and see if there are any problems. If the problem persists, you can download the code from the download button below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->    
<head>
    <meta charset="UTF-8">
    <title>Image Hover Overlay Effect using CSS</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="single-content">
                    <img src="img/1.jpg" alt="">
                    <h3 class="title">Client Name</h3>
                    <div class="img-text">
                        <h2>Web Developer</h2>
                        <p>Lorem ipsum dolor sit amet.</p>
                        <p class="socials">
                            <i class="fa fa-facebook"></i>
                            <i class="fa fa-behance"></i>
                            <i class="fa fa-linkedin"></i>
                            <i class="fa fa-instagram"></i>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="single-content">
                    <img src="img/2.jpg" alt="">
                    <h3 class="title">Client Name</h3>
                    <div class="img-text">
                        <h2>Graphics Designer</h2>
                        <p>Lorem ipsum dolor sit amet.</p>
                        <p class="socials">
                            <i class="fa fa-facebook"></i>
                            <i class="fa fa-behance"></i>
                            <i class="fa fa-linkedin"></i>
                            <i class="fa fa-instagram"></i>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="single-content">
                    <img src="img/3.jpg" alt="">
                    <h3 class="title">Client Name</h3>
                    <div class="img-text">
                        <h2>Digital Marketer</h2>
                        <p>Lorem ipsum dolor sit amet.</p>
                        <p class="socials">
                            <i class="fa fa-facebook"></i>
                            <i class="fa fa-behance"></i>
                            <i class="fa fa-linkedin"></i>
                            <i class="fa fa-instagram"></i>
                        </p> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

ADD CSS:

body {
	background: #1B1B1B; 
}
.container{
    padding-top: 8%; 
}
.single-content .title{
    margin: 0;
    position: absolute;
    font-size: 20px;
    color: #fff; 
}
.single-content{
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
    height: 400px; 
}
.single-content img{
    width: 100%;
    height: 400px; 
}
.img-text{
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,#09d3f3,#0159e4);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transform: perspective(400px) rotateX(-90deg);
    transform-origin: center top 0;
    transition: .5s;
    padding: 40% 0 0;
    color: #fff;
    text-align: center; 
}
.single-content:hover .img-text{
    opacity: 1;
    transform: perspective(400px) rotateX(0); 
}
.img-text h2 {
	font-family: "Bebas Neue", sans-serif;
}
.socials i{
    padding: 0 15px;
}
.single-content .title {
	bottom: 25px;
	left: 25px;
	transition: .9s;
	font-size: 25px;
	text-transform: uppercase;
	background: linear-gradient(to top,#fff,transparent);
	color: #262626;
	padding: 20px 70px;
	line-height: 1.5;
}
.single-content:hover .title{
    bottom: -40px; 
}

@media (max-width: 600px){
    .single-content{
        margin-bottom: 30px;
    }
}

Hover effects with animated overlays help to grab users' attention. It adds a modern and professional look to websites or apps. We hope you have collected the source code. To get more, click on the Load More button on our homepage. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Animated overlay using CSS Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Animated overlay using CSS Animation

Video Tutorial:

Animated overlay using CSS Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form