I.e. look at where my mouse pointer is. Is it supposed to uncover like that?
Not sure why it does that, but for most image ratios it works fine. If someone has a CSS fix Iāll happily apply it, but otherwise I wonāt prioritize this.
Sorry to bump this thread but I was able to find a fix for the solution.
The reason the blurring rule was applying in unexpected ways was because the rule was set to check for hovers pertaining to the topic-body class, which is the inner column, e.g.
It should only be checking for hovers on images / iframes / inline-content, etc.
Current CSS
.tag-nsfw .topic-body:hover .cooked img
Fixed CSS
.tag-nsfw .topic-body .cooked img:hover
You will also need to rearrange the hover rule in some of the other NSFW hover classes such as for iframe.
1 Like
Iframes donāt have a hover selector, but the .video-container div is what is used on the NSFW pages containing videos I could find. The selector for those + yours would be:
.tag-nsfw .topic-body .cooked img:hover, .tag-nsfw .topic-body .cooked .video-container:hover
(Good work finding a solution!)
2 Likes
Ah nice! I made these changes (and one more) - better now?
1 Like
It works great on videos and images 
The only remaining problem is this:
Avatars in quotes, for some reason, are blurred. Normal avatars on a page are not. You could fix it with it
img:not(.avatar)
I just noticed itās not working with emojis either, even though you have the img:not(.emoji)ā¦ let me do some quick testing and get back to you
1 Like
Oh right I forgot, you have to chain :not. Try:
img:not(.emoji):not(.avatar)
That worked, but it broke the āunblurringā Hereās my full uncompiled code, perhaps that helps:
/* hide custom fields from signup form */
.login-form .user-fields {display:none;}
/* hide portfilio options as needed */
/*
.hide-portfolio .portfolio-list {
display:none;
}
*/
/* display nsfw blur and overlay text on any media in #nswf topics */
.tag-nsfw {
.topic-body .cooked img:not(.emoji),
.lazyYT-container,
.has-thumbnail img,
.topic-thumbnail img {
filter: blur(10px);
-webkit-transition: .3s ease-in-out;
transition: .2s ease-in-out;
}
.topic-body .cooked img:hover,
.topic-body .cooked iframe:hover,
.topic-body .cooked .lazyYT-container:hover,
.has-thumbnail:hover img,
.topic-thumbnail:hover img {
filter: blur(0);
-webkit-transition: .3s ease-in-out;
transition: .2s ease-in-out;
}
.topic-body .cooked a.lightbox:before,
.topic-body .cooked iframe:before,
.has-thumbnail a:before,
.topic-thumbnail a:before {
z-index:10;
padding: 5px;
font-size:1em;
position:absolute;
color:#fff;
content: 'ā ļø Mature content - Hover to show';
background: #e86800;
}
.topic-body .cooked a.lightbox:before,
.topic-body .cooked iframe:before {
top: 15px;
left: 10px;
}
.topic-thumbnail a:before {
top: 65px;
left: 20px;
}
.topic-body .cooked a.lightbox:hover:before,
.topic-body .cooked iframe:hover:before,
.topic-thumbnail a:hover:before {
display:none;
}
}
/* disable nsfw blurring for users who set this in their preferences */
.nsfw-always-show .tag-nsfw {
.topic-body .cooked img,
.topic-body .cooked iframe,
.topic-body .cooked .lazyYT-container,
.topic-thumbnail img {
filter: blur(0px);
}
.topic-body .cooked a.lightbox:before,
.topic-body .cooked iframe:before,
.topic-thumbnail a:before {
display:none;
content: none;
}
}
1 Like
Of course it did. I love CSS 
I have work meetings to get to so Iāll look at this later today
1 Like
1 ) Avatar thumbnails have the .avatar class.
2 ) Which means it needs to be checked alongside the not .emoji condition.
e.g.
.tag-nsfw .topic-body .cooked img:not(.emoji, .avatar),
.tag-nsfw .topic-body .cooked img:not(.emoji, .avatar),
.tag-nsfw .lazyYT-container,
.tag-nsfw .has-thumbnail img,
.tag-nsfw .topic-thumbnail img {
filter:blur(10px);
-webkit-transition:.3s ease-in-out;
transition:.2s ease-in-out
}
1 Like
I wonāt edit my post, but maybe the .avatar check should go before the .emoji check for alphabetical reasons?
Seems like you can either have one or the otherā¦ Iād say the avatar blurring isnāt that big of a deal, since it only happens on quotes, so most NSFW threads will never even have the problem in the first place
Yeah itās not a big issue. Iām sure thereās some CSS to fix this, but I canāt figure it out (blurry smiley)
1 Like
When I enter:
.tag-nsfw .topic-body .cooked img:not(.emoji, .avatar),
Into DevTools, both emojis and avatars are unblurred.
Why would it work locally but not server-wise. Is something else that needs to be sync updated?
I really donāt know. Discourse renders the pages client-side; perhaps something changes during generating the page?
This is an automated message - since the last reply was more than 3 months old, we auto-marked it as the solution. If you still need help, just post a new reply.