Nice Image Hover Overlay Effect

byCodingFlicks -March 21, 2021

0

Cards are organized and compact content block formats in website design. They are used in web design to display profiles, blog entries, products, etc. These elements help maintain a clean and beautiful layout on all types of devices, be it desktop, mobile, or any other small screen. In today's blog post, we will share with you a CSS animation snippet about image hover overlay effect or card hover CSS animation. We have created a detailed video tutorial about this snippet, which we have attached below. Don't hesitate to watch that video tutorial before collecting the code.

Video Tutorial:

Hope you watched the above video tutorial. Your viewership is very important for this channel. In this CSS animation snippet, we have given the image a beautiful hover animation with the help of CSS. CSS animation is very helpful in creating beautiful-looking animations without relying on JavaScript. In fact, it has become a favorite tool among developers due to its simplicity, performance, and impact. This wonderful technique in web design helps us create smooth, attractive animations that bring websites to life. CSS animations are very lightweight, so it is helpful in maintaining the speed and responsiveness of the webpage. As you can see, we have created a card-like image hover effect where all the information about the image is hidden behind the image. When we hover over the image, it rotates, as if it is attached to a hinge. We can see the information behind it.

Hover animations on images or cards create immediate, intuitive feedback that significantly improves the user experience. Animations on images or cards help motivate users to interact more with the card, which leads to content discovery and increases time spent on the page. Since animation reflects the tone of a site, it also helps to enhance the branding and aesthetics of that site.

You May Also Like:

- Animated Skill Bar Design

- Pure CSS Animated Background

Cards or Image hover overlay animation [ Source Code ]:

To create this card or Image hover overlay CSS animation snippet, we need to create an HTML and a CSS file. Then, copy the code from the code box below and paste it into those files. You can also download the code by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->    
<head>
    <meta charset="UTF-8">
    <title>animated css card</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
        
    <div class="wrapper">
        <div class="wrap">
            <div class="content">
                <h3>Laura Thorn</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate vero enim illum, tempora quas autem.</p>
                <p class="socials">
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-youtube"></i></a>
                    <a href="#"><i class="fa fa-pinterest"></i></a>
                </p>
            </div>
            <div class="imgBox"></div>
        </div>
    </div>
        
    
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
	background: #442C4E;
	font-family: arial;
}
.wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.wrap {
	width: 300px;
	height: 300px;
	border-radius: 15%;
	position: relative;
	cursor: default;
	box-shadow: 0 30px 15px rgba(0, 0, 0, 0.2);
}
.content {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 15%;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(135deg, #A12CD0, #FF7FD6);
}
.content p {
	width: 70%;
	margin: auto;
	text-align: center;
	font-size: 11px;
	line-height: 1.5;
}
.socials {
	padding-top: 45px;
}
.socials a {
	text-decoration: none;
	color: #fff;
	font-size: 15px;
	margin: 0 7px;
}
.imgBox {
	width: 100%;
	height: 100%;
	border-radius: 15%;
	overflow: hidden;
	position: absolute;
	box-shadow: inset 0 0 0 15px rgba(255, 255, 255, 0.5);
	transform-origin: 110% 50%;
	transition: all 0.3s ease-in-out;
	transform: translate3d(0, 0, 0);
	background-image: url(1.jpg);
	z-index: 12;
	background-size: cover;
	background-position: center center;
}
.content h3 {
	color: #fff;
	text-transform: capitalize;
	position: relative;
	text-align: center;
	font-size: 30px;
	margin: 0 auto;
	padding: 70px 0 15px 0;
	font-weight: 400;
	text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
	animation: jump .9s infinite ease;
}
.wrap:hover .imgBox {
	-webkit-transform: rotate(-110deg);
	transform: rotate(-110deg);
}
@keyframes jump {
	50% {
		transform: translateY(-10px);
	}
	0%, 100% {
		transform: translateY(0px);
	}
}

To make our website functional and enjoyable to use, we can rely on CSS animations. If we apply CSS animations correctly to cards or images, it can significantly transform the user experience. In this way, we can increase engagement and encourage exploration of our website. If you want more code like this, please click the "Load More" button on our homepage. Thanks for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.