Inspiring

Question

How do I make make sharp text appear over a blurred background on :hover?

Forum|Forum|4 years ago
March 17, 2021
1 reply
1330 views

Hi,

Basic CSS question here.

I like using<a> tags w/ image backgrounds as gallery thumbnails because of how easy it is to specify css :hover effects. However, I'm going for something a bit more complex than what I'm used to this time; and have a feeling the solution lies in css commands I'm less familiar with.

There are two things I would like to see happen on :hover

The regular-state background image goes dark & blurs, via filter: brightness(25%) blur(2px)
Text (sharp) appears over the (blurred) result.

As we know, the text will adopt whatever properties are applied on the container; but even if you wrap said text in <span> tags with filter:blur(0) !important applied, it won't override the parent's state (which is now dark & blurry, so the text is as well).

How do I go from a clear image (ideally, a BG on an <a> tag since it will be clickable) to something like the first few seconds of this video (minus the movement). The text should be centered on both axis, just like that (it will likely be just a word or two).

I'm not entirely sure what the proper way to do this is, but I'm assuming I would need 2 containers per thumbnail (one for the image, one for the text appearing on :hover). Could someone help me with the exact syntax?

PS: I assume there will be a "safe zone" on the :hover area where the text is, since it will be on top of the <a> tag when the page renders; if this is the only side effect, I can live with it. Although it would be even better if that safe zone didn't exist.

Thanks!

This topic has been closed for replies.

Community Expert

Community Expert

There is sooo much stuff out there, one Bing search gave me https://stackoverflow.com/questions/39122324/css-blur-on-background-image-hover-but-not-on-text/39123513

This should start you off. Showing the text on hover should be a cinch.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Inspiring

Interesting method. Will try.

Legend

Example below (use you own background image).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Image Blur</title>
<style>
.blurWrapper {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.bgImg {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url('fruits/apples.jpg');
background-size: cover;
transition: 0.5s ease-in-out;
}
.bgImgText {
position: absolute;
z-index: 2;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
display: none;
}
.bgImgText h4 {
margin: 0;
padding: 0;
color: #fff;
font-size: 25px;
font-weight: normal;
}
.bgImg:hover + .bgImgText {
display: block;
}
.bgImg:hover {
filter: blur(3px) brightness(70%);
}
</style>
</head>
<body>
	
<div class="blurWrapper">
<div class="bgImg"></div>
<div class="bgImgText"><h4>Image Text</h4></div>
</div>


</body>
</html>