Blur Hover Effect

Developer
APinix
Size
2,995 Kb
Views
12,144
  1. Blur Hover Effect Previews
  2. Blur Hover Effect HTML Codes
  3. Blur Hover Effect CSS Codes

How do I make an blur hover effect?

CSS Accelerated Filters. What is a blur hover effect? How do you make a blur hover effect? This script and codes were developed by APinix on 11 January 2023, Wednesday.

Blur Hover Effect Previews
IQ Test

Blur Hover Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blur Hover Effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="box"> <div class="img"></div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
</body>
</html>

Blur Hover Effect - Script Codes CSS Codes

@import 'https://fonts.googleapis.com/css?family=Gloria+Hallelujah';
*, *:before, *:after { box-sizing: border-box;
}
body, html { width: 100%; height: 100%; font-family: "Gloria Hallelujah", sans-serif; margin: 0; padding: 0; background: #df2027;
}
.wrapper { width: 300px; height: 280px; box-shadow: 0 15px 24px rgba(0, 0, 0, 0.22), 0 19px 76px rgba(0, 0, 0, 0.3); border-radius: 5px; overflow: hidden; cursor: pointer; transition: all 0.25s ease-in-out; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #df2027;
}
.wrapper .box { width: 100%; height: 100%;
}
.wrapper .box:before { content: "have some..."; width: 100%; height: 100%; line-height: 280px; color: #EAEDF0; font-size: 34px; text-align: center; position: absolute; top: 0; left: 0; z-index: 1; transition: all 0.25s ease-in-out;
}
.wrapper .box:after { content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); position: absolute; top: 0; left: 0; transition: all 0.25s ease-in-out;
}
.wrapper .box .img { width: 100%; height: 100%; filter: blur(20px); transition: all 0.25s ease-in-out; background: url(http://strongcoffeemarketing.com/wp-content/uploads/2015/10/unsplash-coffee-bannerimage.jpg) no-repeat; background-size: cover; background-position: left;
}
.wrapper:hover { top: calc(50% - 20px); box-shadow: 0 25px 34px rgba(0, 0, 0, 0.36), 0 19px 76px rgba(0, 0, 0, 0.4);
}
.wrapper:hover .box:before { top: 50px; color: transparent;
}
.wrapper:hover .box:after { background: rgba(35, 40, 47, 0); color: transparent;
}
.wrapper:hover .img { background-position: center; filter: blur(0px);
}
Blur Hover Effect - Script Codes
Blur Hover Effect - Script Codes
Home Page Home
Developer APinix
Username aPinix
Uploaded January 11, 2023
Rating 3
Size 2,995 Kb
Views 12,144
Do you need developer help for Blur Hover Effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

APinix (aPinix) Script Codes
Name
AppStore Flat Hollow Badge
Fire on Resize Finish
Wheel Menu
A Pen by aPinix
Knob with Snap
IOS7 Flat Toggle
Guided Tour Tooltip
Schedule a notification
CSS Infinite 360
CSS Clock
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!