• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Engaged ,
Mar 16, 2021 Mar 16, 2021

Copy link to clipboard

Copied

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

  1. The regular-state background image goes dark & blurs, via filter: brightness(25%) blur(2px)
  2. 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!

Views

188

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 16, 2021 Mar 16, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 16, 2021 Mar 16, 2021

Copy link to clipboard

Copied

Interesting method. Will try.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 17, 2021 Mar 17, 2021

Copy link to clipboard

Copied

 

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>

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 12, 2021 Apr 12, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 12, 2021 Apr 12, 2021

Copy link to clipboard

Copied

LATEST

 

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines