Top featured works emoji bug

Bug
1

Hey there, Sergey on the line :slight_smile:

It’s a bit of an old bug, but anyway:

When surfing on Blenderartists forum, I found myself a little bug: there’s a section at the top of the website, where you are able to see 6 featured top works. When you hover on one of them, the title becomes visible. The thing I noticed is that if the title contains an emoji (as shown in the screenshot below) it’ll still be visible even if you haven’t hovered on it yet.


I did myself a little investigation and ended up with the next CSS-rules that might help to solve that problem.

The thing is the title of those featured row images has next rules:

.featured-topic h3 a {
    font-size: 14px;
    color: transparent;
    transition: color .6s,text-shadow .6s
}

I don’t think that “color: transparent” is a proper way to do this. So that’s why it affects only on text, but not on an emoji itself. Because the emoji is wrapped in an “img” tag.

So I think it would be a better way to remove “color: transparent” & make something like this:

.featured-topic h3 {
    position: absolute;
    top: 0;
    padding-top: 0;
    left: 5%;
    width: 90%;
    text-align: left;
    visibility: hidden;
}

.featured-topic:hover h3 {
    visibility: visible;
}

So the final code will look like this:

image

Hope that helps :slight_smile:

3

Hi Sergey!

Thanks for the report, however, I could be wrong, but this is not what the default CSS looks like in the Homepage Feature component :thinking:. From what I see, it’s your customizations. :smile:

4 Likes
4

Hi, @Arkshine!

Sorry, didn’t know about that, I thought that was the Discourse feature. Pardon me :slight_smile:

1 Like
5

Please let your administrators know, thanks!

Closing this one.

1 Like
6

This topic was automatically closed after 13 hours. New replies are no longer allowed.