CSS Blur Effect On Hover

CSS Blur Effect On Hover

Adding visual and interactive elements to any website plays an important role in attracting visitors. With interactivity in mind, you can include the CSS Blur Image Hover Effect on your website. This type of animation brings your website's images to life and entices users to interact with your content. Today we will share one such snippet with you. This beautiful snippet is created with only HTML and CSS. Below is a video tutorial showing the step-by-step process of making it. Our YouTube channel has many videos on CSS Animation, Full Responsive Website Design, JavaScript Projects, etc. If you find the videos useful, you can subscribe to our channel and stay with us.

Video Tutorial:

Different websites have different needs for displaying portfolios, product galleries, or thumbnail images. Adding this blur hover effect or any other animation instead of simply showing the images can grab users' attention and encourage them to explore your content further. In our project, we have taken three single div inside a main div. One image and image-related content have been taken inside every single div. Hovering over these images will bring up the content with a blur effect from below. CSS media queries are used to make the project responsive. To understand in more detail, watch the video tutorial above.

You May Also Like:

CSS Blur Effect on Hover [ Source Code ]:

To create this blur effect on hover, first, create an HTML and then a CSS file. Put the code into the appropriate file by copying it from the code box below. Save the file and open it once in your web browser. If it doesn't work then download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>Pure CSS Blur Effect on Hover</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
      <div class="single-item">
        <img src="img/1.jpg" alt="">
        <div class="content">
          <h2>Marlon James</h2>
          <p>Photographer</p>
        </div>
      </div>
      <div class="single-item">
        <img src="img/2.jpg" alt="">
        <div class="content">
          <h2>Richard Doe</h2>
          <p>Developer</p>
        </div>
      </div>
      <div class="single-item">
        <img src="img/3.jpg" alt="">
        <div class="content">
          <h2>Jason Walker</h2>
          <p>Marketer</p>
        </div>
      </div>
    </div>
</body>
</html>

ADD CSS:

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	background: #111;
}
.wrapper {
	width: 70vw;
	margin: 9rem auto 0;
}
.single-item, .content {
	text-align: center;
}
img, .content {
	transition: 0.7s all;
	border-radius: 3px;
}
.single-item {
	float: left;
	max-width: 28%;
	position: relative;
	margin: 0 2%;
	overflow: hidden;
}
.single-item img {
	width: 100%;
	margin-bottom: -4px;
}
.single-item .content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.2);
	color: #fff;
	opacity: 0;
	transform: translateY(100px);
}
.single-item .content h2 {
	padding-top: 95%;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 40px;
	-webkit-text-stroke: .5px white;
	color: transparent;
}
.single-item .content p {
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 3px;
}
.single-item:hover .content {
	opacity: 1;
	transform: translateY(0);
}
.single-item:hover img {
	-webkit-filter: blur(5px);
	filter: blur(10px);
}
@media screen and (max-width: 1148px) {
	.single-item {
		max-width: 48%;
		margin: 1%;
	}
}
@media screen and (max-width: 767px) {
	.single-item {
		float: none;
		max-width: 80%;
		margin: 0 auto 30px;
	}
	.single-item .content h2 {
		font-size: 25px;
	}
	.single-item .content p {
		font-size: 14px;
	}
}

Hope the code is working properly. There are many more such snippets on the website. To get these, go to the homepage and click on the Load More button below. Then keep scrolling down. Hope you find some snippets that you might find useful. If you find our website useful, please share our blog posts on social media. Thank you very much for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box