Icon/color overlay on image: hover

[fabien]

Is there a built-in functionality on GP Premium to recreate an effect similar to this? https://www.w3schools.com/howto/howto_css_image_overlay_icon.asp

I have small youtube screenshots on a page that link to Youtube videos. I would like a semi-transparent white fade + Youtube icon on hover to indicate they link to external content.

I couldn’t get the tutorial above to work… I have provided a link to a similar effect below.

[David]

Hi there,

can you link us to your Site so we can see what it would involve

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[fabien]

I edited the hidden link in the original post. Thanks!

[Tom]

Hi there,

This should work with the first one, as you’ve added a youtube-over class to the container. That class doesn’t seem to exist in the other containers:

.youtube-over a:after {
    content: "";
    background: #fff url(https://YOURURLHERE.com/wp-content/uploads/youtube.svg);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 500ms ease;
}

.youtube-over a:hover:after {
    opacity: 1;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[fabien]

fantastic, thank you!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts