Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1332203

    I’m adding thumbnails that point to YouTube videos. YouTube forces extra stuff on top of the thumbnails which I’m trying to avoid.
    Here’s what I’m thinking:
    1. Add the raw thumbnail
    2. On mouseover, the play button image would appear
    3. When you click on the image, it takes you to another page

    On the Enfold template I’m using, I remember on the homepage it had “Recent Top Sellers” with images of men and women and they would change on mouseover – https://kriesi.at/themes/enfold-shop/

    I never looked behind the scenes to see how they were doing this. Examples are deleted now.

    Any suggestions would be greatly appreciated. Thank you

    #1332298

    Hey Julio,

    Thank you for the inquiry.

    You can actually use the Image element to open the video as an external link, just make sure to apply the “noLightbox” class name in the Advanced > Developer Settings > Custom CSS class field to prevent lightbox from opening. For the play button, you can try this css code.

    .avia-image-container:hover .avia-image-overlay-wrap:before {
        content: 'Play Button Here';
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 50%;
        z-index: 1000;
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
    }

    Just replace the content value with an actual play button image or a font icon.

    Best regards,
    Ismael

    #1332376

    @Ismael,
    Thank you for your response. I have a couple naïve questions:
    1. I have placed the Image Element within a Color Section
    2. I added the “noLightbox” class name in the Advanced > Developer Settings > Custom CSS class field
    3. Silly Naive Question: Where do I add this CSS code?
    4. content: ‘Play Button Here’; – Is this the full URL for the button (e.g. https://kingdomlearners.com/wp-content/uploads/2021/12/Play-Button-Mouseover-for-Thumbnails.png)?

    Thanks so much for your help.

    #1332379

    UPDATE: I have the Mouseover working, however, the play button is not clickable, but the image in the Image Element is clickable. How can I resolve this? Thank you

    • This reply was modified 2 years, 7 months ago by Jules.
    #1332455

    Hi,
    Thank you for the link to your site, instead of this rule:
    .avia-image-container:hover .avia-image-overlay-wrap:before
    try this rule:
    .avia-image-container:hover .avia-image-overlay-wrap a.avia_image:before
    it will please your imge inside the link so it is clickable.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1332468

    Mike & Ismael,
    WORKS AS EXPECTED :)
    THANK YOU SO VERY MUCH FOR YOUR HELP! IT IS GREATLY APPRECIATED!!!!
    Julio

    #1332478

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Add Play Button on Mouseover’ is closed to new replies.