Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 27, 2017 at 8:31 am #857360
    dianado

    Here’s a breakdown of the issue:
    I add an image to the bottom of a sidebar that displays on the Blog page (see link in private content). The image is clickable.

    The first time I hover over the image, the overlay is not visible, due to the fact that the ‘top’ attribute has a negative value of -129px as follows:

    The second time I hover over the image, the position of the top attribute is correctly set to 0px.
    I used the Image widget to drop the image into the sidebar. I’ve also tried using the Custom HTML and the Text widgets to insert images into the sidebar and I get the same issue with the overlay having a negative top value the first time I hover over the image.

    Any idea why this is happening? Can you recommend a workaround?

    Many thanks

    September 28, 2017 at 5:12 am #857831
    Rikard

    Hey dianado,

    Is it the QCA image at the bottom of the sidebar? If so then I can’t reproduce it, in what browser are you seeing that happening?

    Best regards,
    Rikard

    September 28, 2017 at 6:11 am #857863
    dianado

    Hi Rikard
    Yes, that’s the image. I can recreate the issue using Chrome and Safari. Is it possible that it looks like it is working when in fact it isn’t? It only happens the first time you hover over the image. The second time onwards, the ‘top’ attribute is set correctly and the overlay appears from then on, in the correct position.

    Here is what the Chrome debugger shows the first time I hover over the image:
    <span class=”image-overlay overlay-type-extern” style=”left: -5px; top: -129px; overflow: hidden; display: block; height: 144px; width: 252px;”><span class=”image-overlay-inside”></span></span>

    and here’s what it shows the second time onwards:

    <span class=”image-overlay overlay-type-extern” style=”left: -5px; top: 0px; overflow: hidden; display: block; height: 144px; width: 252px;”><span class=”image-overlay-inside”></span></span>

    Regards
    Diana

    September 28, 2017 at 9:42 am #857903
    Victoria

    Hi Diana,

    DO you want the overlay to be there or do you want to remove it?

    Best regards,
    Victoria

    September 29, 2017 at 12:35 am #858270
    dianado

    Hi Victoria
    I’d like the overlay to be there as the image may be used to link to an advertiser’s page.

    Thanks
    Diana

    September 29, 2017 at 5:21 am #858320
    dianado

    In addition to my last reply, and since I mentioned ‘advertiser’, please don’t suggest that I use the Enfold Ad Widget as a workaround ;o). I’d really like the overlay issue to be fixed.

    Many thanks
    Diana

    October 2, 2017 at 4:08 am #859046
    Ismael

    Hi,

    Please add this code in the Quick CSS field. It’s not working correctly because there’s a custom script that applies the “display” property on hover.

    .widget_media_image a {
    display: block !important;
}

    Best regards,
    Ismael

    October 4, 2017 at 6:05 am #859904
    dianado

    Hi Ismael
    Thank you so much. That worked and is exactly what I was after.

    Again, many thanks
    Diana

    October 4, 2017 at 8:48 am #860019
    Ismael

    Hi,

    No problem. Let us know if you need anything else. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Overlay on linked image in widget area is positioned outside of image’ is closed to new replies.