Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 14, 2018 at 7:20 pm #897141
    spalta

    I would like to remove the arrow showing up when hovering over an image with a link. I also would like to modify the transparency of the overlay on top of the linked image. How to make it look like the demo theme Enfold Band?

    January 14, 2018 at 7:41 pm #897150
    Mike

    Hey spalta,
    The images on your home page don’t have the arrow on hover, so I found a different page that did, please check the url in the Private Content area to ensure I’m looking at the correct element.

    Best regards,
    Mike

    January 14, 2018 at 9:13 pm #897180
    spalta

    http://hovenaset.info/nyheter-2/nyheter/ is page at hovenaset.info so it is OK ta look at that

    January 14, 2018 at 9:34 pm #897188
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    
.image-overlay {
background-color: #d63e2d !important;
opacity: 0.7 !important;
}
.image-overlay-inside {
display:none !important;
}

    adjust color and opacity to suit. If you want this to only work on some pages, please let us know which ones so we can adjust the code for you.

    Best regards,
    Mike

    January 14, 2018 at 9:57 pm #897201
    spalta

    Thanks Mike; but it generates a red overlay which could be OK if it disappeared after hovering over the image, but it stays:/Users/Olga/Desktop/Skärmavbild 2018-01-14 kl. 20.55.04.png

    January 14, 2018 at 10:07 pm #897208
    Mike

    Hi,
    Oh, sorry I thought that was what you wanted, like the band demo.
    To remove the overlay and the arrow try this:

    .image-overlay {
display:none !important;
}

    or just to have no color, try this:

    .image-overlay {
opacity: 0.7 !important;
}
.image-overlay-inside {
display:none !important;
}

    Best regards,
    Mike

    January 14, 2018 at 10:23 pm #897216
    spalta

    Your first suggestion works, but the visitor do not get any feedback that a link is active at the image.
    The second proposal also works, but the problem is that the overlay does not disappear after hoovering (which it did from the beginning with the arrow).
    Best regards

    January 15, 2018 at 12:23 am #897262
    Mike

    Hi,
    Sorry I’m confused now as to what effect you would like. I thought you wanted it to look like the Enfold Band Demo, which is red on hover with no arrow.
    Please advise.

    Best regards,
    Mike

    January 15, 2018 at 11:32 am #897478
    spalta

    Mike,
    Yes, I would like it to work exactly as in Enfold Band Demo, where you see a (transparent red) overlay when the cursor hoover over an image with a link. If you don’t click but go on moving the cursor, the overlay disappears when the cursor moves away from the image.
    My problem is that when I implement your proposal:
    .image-overlay {
    opacity: 0.7 !important;
    }
    .image-overlay-inside {
    display:none !important;
    }
    … is that if you don’t click but go on moving the cursor, the overlay remains visible when the cursor moves away from the image.
    The transparent overlay remains on on top of the image as long as you are at the same page. That means that you will see a number of images with the overlay if you have hoovered over several images at the same page. Only when a go to another page they are gone when you return to the same page again.
    I would like it to show up when the cursor hover over the image and then immediately disappear when I move the cursor away from the image.
    I have tried both Safari and Firefox web readers with the same result.
    Best regards
    spalta

    January 15, 2018 at 12:57 pm #897497
    Mike

    Hi,
    Thank you, I understand now, please remove the other code and try this:

    
.image-overlay:hover {
background-color: #d63e2d !important;
opacity: 0.7 !important;
}
.image-overlay-inside {
display:none !important;
}

    If you don’t want the color please remove this line

    background-color: #d63e2d !important;

    Best regards,
    Mike

    January 15, 2018 at 1:09 pm #897506
    spalta

    Mike,
    Brilliant! It just works fine! Thanks.
    Do you know anything about why Enfold Instagram dosen´t work after last upgrading? Instead of a grid of Instagram images in the widget there are now just a number of question marks.

    Best regards
    spalta

    January 15, 2018 at 1:43 pm #897519
    spalta

    Mike,
    I really like this! I now use:
    .image-overlay:hover {
    opacity: 0.7 !important;
    }
    .image-overlay-inside {
    display:none !important;
    }
    … but, would like to be able to change the transparency. I thought that 1.0 would mean no transparency and 0.1 very much transparency. But the transparency of the hovered image remains the same regardless what figure I put in.
    Hoe to fix that?

    Best regards
    spalta

    January 16, 2018 at 5:59 am #897891
    Mike

    Hi,
    The overlay is a white, this is from another rule in your css, The opacity tells the overlay how much transparency it should have. 0 is 100% transparent, 1 is the solid white. So 0.5 is halfway. When making these changes please clear your browser cache with each change.

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.