Is it possible to remove hover effect on images?

newskywebsites · August 2015

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

Albert · August 2015

Hi,

which page you mean?

newskywebsites · August 2015

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

Thanks!

Dawn

Albert · August 2015

To remove hover effect on images and make them all the same size, please use below css:

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

.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; }

newskywebsites · August 2015

Thank you so much for the fast and thorough response!

Albert · August 2015

You're welcome

cheesburger · 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)

cheesburger · February 2016

any suggestions?

Albert · February 2016

@cheesburger If you mean zoom effect, you can remove it with the following css:

.image_frame .image_wrapper .mask::after { display: none !important; }
.image_frame .image_wrapper img:not(.ls-l) { transform: scaleY(1) !important; }

cheesburger · February 2016

Thanks!

Albert · February 2016

You are welcome

lparziale · 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; }

gayalcham · 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;

}

angadtalwar · April 2020

Thanks this helped a lot.

Is it possible to remove hover effect on images?

Comments