CSS Image Hover Caption Overlay

Images are an essential element for any website. No website can be imagined without images. No matter how simple or text-based the website is, it will contain an image. Since people process images much faster than text, their presentation should be attractive. Keeping this in mind, developers apply attractive image hover effects on their websites. In today's blog post, we are sharing the code for a simple yet elegant image hover caption overlay animation made with HTML and CSS. Below is the video tutorial of this snippet. You can take a look if you want.

Video Tutorial:

Hope you have watched the above CSS Animation video tutorial on CSS Image Hover Caption Overlay. There is a very famous saying that a picture speaks a thousand words. A picture can convey a lot of complex information and illustrate any idea more effectively than text. Animation is very important to add interactivity to any static image. Because it increases user interaction and engagement. Animation can convey information more effectively and make the website interface more visually appealing. So add stunning hover overlay animations to transform your website's outdated or less attractive static images into modern and dynamic elements.

You may Also Like:

CSS Image Hover Caption Overlay [ Source Code ]:

To create this image hover Overlay CSS Animation snippet first we need to create an HTML and then a CSS file. After that, you have to copy and paste the following code into your files. In case of any problem, you can download the code from the download button provided below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- divinectorweb.com -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Only Image Hover Caption overlay</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <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="team-area"> 
        <figure class="box">
            <figcaption>
                <h2>UX Designer</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p class="socials">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-pinterest"></i>
                    <i class="fa fa-linkedin"></i>
                </p>
            </figcaption>
            
            <img alt="" src="img/1.jpg">
        </figure>
        
        <figure class="box">
            <figcaption>
                <h2>Web Designer</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p class="socials">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-pinterest"></i>
                    <i class="fa fa-linkedin"></i>
                </p>
            </figcaption>
            
            <img alt="" src="img/2.jpg">
        </figure>
        
        <figure class="box">
            <figcaption>
                <h2>Developer</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p class="socials">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-pinterest"></i>
                    <i class="fa fa-linkedin"></i>
                </p>
            </figcaption>
            
            <img alt="" src="img/3.jpg">
        </figure>
    </div>

</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; 
}
body {
	font-family: "Montserrat", sans-serif;
	background: #17374c;
}
.team-area {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	color: #fff;
}
.box {
	position: relative;
	margin: 20px;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	max-width: 400px;
	transition: transform 0.3s ease;
}
.box img {
	width: 100%;
	display: block;
	border-radius: 10px;
	transition: transform 0.5s ease;
}
.box:hover {
	transform: scale(1.05);
}
.box figcaption {
	position: absolute;
	width: 100%;
	bottom: 0;
	padding: 20px;
	text-align: center;
	background: rgba(255, 23, 112, 0.7);
	transform: translateY(100%);
	transition: transform 0.5s ease;
	border-radius: 100px 100px 0 0;
}
.box:hover figcaption {
	transform: translateY(0);
}
.box h2 {
	font-size: 40px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: "Bebas Neue", sans-serif;
	margin: 0;
}
.box p {
	font-size: 14px;
}
.socials {
	margin-top: 10px;
}
.socials i {
	font-size: 18px;
	margin: 0 10px;
}
@media(max-width: 800px) {
	.team-area {
		flex-direction: column;
	}
}
@media(max-width: 600px) {
	.box h2 {
		font-size: 20px;
	}
}

Animation plays an important role in your website to improve engagement and interaction. Adding hover animation to your website images is a part of it. Hope you got the code. Our website contains many snippets of Responsive Website Design, JavaScript Projects, CSS Animation Examples, etc. Discover them by clicking the Load More button on the website Thank you very much for visiting our website.

DOWNLOAD CODE

Video Tutorial:

CSS Image Hover Caption Overlay [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS Image Hover Caption Overlay

Video Tutorial:

CSS Image Hover Caption Overlay [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form