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

Report · Mar 16, 2021

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!

Report · Mar 16, 2021

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/3912...

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

Wappler, the only real Dreamweaver alternative.

Report · Mar 16, 2021

Interesting method. Will try.

Report · Mar 17, 2021

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>

Report · Apr 12, 2021

Sorry it took me so long to finally try this out, but the pseudo-element method you recommended works; better than non-pseudo methods, even (that seem to cause minor display glitches on mouseover, especially when directly over the text area). So it's not just tidier, the experience itself is superior.

My only nitpick is that unlike THOSE methods, the bounding box in yours also blurs with the image. Not a big deal by any means, but I was wondering if there was a way to keep the borders sharp while that bg image blurs.

Report · Apr 12, 2021

Set the blur to 10px:

.bgImg:hover {
filter: blur(10px) brightness(70%);
}

Then try the updates, in red, below:

.bgImg {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 110%;
width: 110%;
background-image: url('fruits/apples.jpg');
background-size: cover;
transition: 0.5s ease-in-out;
margin: -10px;
}

See if that has the desired effect.