Tagged: , , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 26, 2015 at 8:29 pm #493801
    micscr

    Hey,

    I have a quite basic request concerning the mouseover overlay-effect for images and graphics.

    Screenshot as it is right now: http://postimg.org/image/x5yszuqxr/

    I’d need to set a “lighter” – more minimal – overlay-effect. so that the mouseover-effect is just slightly sensible.

    Guess the value for the effect’s opacity needs to be reduced somewhere…?

    Thx, Regards
    Michael

    Edit:
    I have already hidden the overlay-icon via CSS:

    #top .image-overlay-inside:before{display:none;}

    • This topic was modified 9 years, 3 months ago by micscr. Reason: provided additional css-code
    August 27, 2015 at 3:20 pm #494211
    Elliott

    Hey micscr!

    Add this to your custom CSS.

    #top .avia_transform a:hover .image-overlay {
    opacity: 0.2 !important;
}

    Regards,
    Elliott

    August 27, 2015 at 4:25 pm #494290
    micscr

    Hi Elliot,

    thank you!
    But are you sure this is the correct code?
    Doesn’t seem to change the mouseover-effect in any way. Even when I modify the opacity value (0.2) I can’t see the overlay’s opacity gets lighter or stronger…

    Thx,
    Michael

    August 28, 2015 at 1:28 pm #494809
    Andy

    Hi!

    try this code instead: 

    .avia_transform a:hover .image-overlay {
opacity: 0.2 !important;
}

    Cheers!
    Andy

    August 28, 2015 at 1:37 pm #494814
    micscr

    Hi Andy,

    now it works properly – thanks a lot!

    Regards,
    Michael

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Img-Overlay Opacity: "Lighter" MouseOver Effect’ is closed to new replies.