Is it possible to remove hover effect on images?

I'm working on this page near the bottom where you see logos for SIMA, ASCA, BBB, etc. Only two of the logos are linked. So even though all the images are 150x150, the linked ones are smaller because of the hover effect. Is it possible to remove that so all the images are the same size and the hover effect only lightens the image instead of moving it and adding the link icon overlay?

I'm using 1/6 image tool for each graphic. Wasn't sure if that was the best way to handle this...

Using muffin builder (not a coder, so if you give me code, please be specific), and latest version of everything with child theme.

Thanks!
Dawn

Comments

  • Hi,

    which page you mean?
  • Sorry. Home page - http://2df.3c7.myftpupload.com/  near the bottom where you see logos for SIMA, ASCA, BBB, etc. 

    Thanks!
    Dawn
  • To remove hover effect on images and make them all the same size, please use below css:
    1. .image_frame:not(.no_link) .image_wrapper img:not(.ls-l) { margin-bottom: 0 !important; }
      .image_frame .image_wrapper img:not(.ls-l) { top: 0 !important; }
      .image_frame .image_wrapper .image_links { display: none !important; }
    But please notice that above css will overwrite styles for all images around site. So if you want to remove this hover effect for those images only, please append class name for section where these items are and then use the same css code but with the custom class name at the beginning:
    1. .custom-class-name .image_frame:not(.no_link) .image_wrapper img:not(.ls-l) { margin-bottom: 0 !important; }
      .custom-class-name .image_frame .image_wrapper img:not(.ls-l) { top: 0 !important; }
      .custom-class-name .image_frame .image_wrapper .image_links { display: none !important; }
  • Thank you so much for the fast and thorough response!
  • edited February 2016
    that doesn't work for me! :(
    it removed the link icon overlay but the zoom hover effect it's always here.

    http://www.assicurattivi.it    (I mean the images of blog posts)
  • any suggestions? 
  • @cheesburger If you mean zoom effect, you can remove it with the following css:
    1. .image_frame .image_wrapper .mask::after { display: none !important; }
      .image_frame .image_wrapper img:not(.ls-l) { transform: scaleY(1) !important; }
  • edited March 2016
    I still had a frame showing so looked up another response - you can try this as well:

    .image_frame .image_wrapper .mask { display: none !important; }
    .image_frame .image_wrapper .image_links { display: none !important; }
    .image_frame:hover .image_wrapper img, .image_frame.hover .image_wrapper img { top: 0px; }
    .image_frame:not(.no_link) .image_wrapper img:not(.ls-l) { margin-bottom: 0 !important; }
  • edited May 2017
    if you want to just remove the magnifier icon only , use this code . its work for me. cheers :) 

    .image_frame .image_wrapper .image_links.double a:first-child{ display:none!important;}

    .image_frame .image_wrapper .image_links.double a {
        width: 100% !important;
       
    }

    ;)
  • Thanks this helped a lot.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.