Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 10, 2021 at 2:07 am #1332203
    Jules

    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

    December 10, 2021 at 12:13 pm #1332298
    Ismael

    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

    December 10, 2021 at 9:11 pm #1332376
    Jules

    @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.

    December 11, 2021 at 1:13 am #1332379
    Jules

    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, 11 months ago by Jules.
    December 12, 2021 at 1:37 am #1332455
    Mike

    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

    December 12, 2021 at 6:22 am #1332468
    Jules

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

    December 12, 2021 at 12:39 pm #1332478
    Mike

    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

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