Linked Images - Remove Rollover / Hover / Crop Effect

turbot · April 2015

Hello,

I love BeTheme but by default, you have an annoying design issue - whereby a linked image:

1) Crops the top and bottom of an image by approx 20px
2) Has a very intrusive and distracting hover effect of a different colour rolls up with a link icon.

I've figured out how to remove this hover layet - but what code stops the images from being cropped.

Unlinked they display fine. With links they are not appearing properly and very distracting too.

I'd really appreciate if you can tell me how I can disable this outright - so I can have ordinary linked images, maybe with a very minor fade effect (like 10%) on hover. That would be subtle and better. .

Albert · April 2015

Hey,

please show us on screenshot what you exactly mean and also please attach url to website where you want to change this.

Thanks!

fquadt · April 2015

Hello,

please have a look at http://www.martin-ruetter-live.de/ruetters-dogs

So far I added this custom CSS:

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

How can I remove the mask hiding the about 15px at the bottom of the linked images?

Thank you,

Florian

Albert · April 2015

@fquadt But we don't see any mask on your website. You got just plain images without any effect.

fquadt · April 2015

The images are cropped at the bottom. If you inspect the image you will see the CSS code

margin-bottom: -15px !important;

if you disable this code in the inspector panel, the image is shown completely.

Where can I change the or add CSS to show the image completey in general?

Albert · April 2015

Ohh, ok

We see what you mean now. So to remove this effect, please use below css:

.image_frame:not(.no_link) .image_wrapper img:not(.ls-l) { margin-bottom: 0 !important; }

elaverdiere · February 2016

Where do I put the CSS?

I put the line in Betheme option/Custom CSS & JS. And I still have the roll over on the images.

ali7e · February 2016

You can put it in the Custom CSS section in the theme options.

Albert · February 2016

Theme options > Custom CSS & JS > Custom CSS section.

bonste · November 2017

I was looking for a solution for this too!

This is perfect, thank you all!

Linked Images - Remove Rollover / Hover / Crop Effect

Comments