Linked Images - Remove Rollover / Hover / Crop Effect

turbot

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

Hey,

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

Thanks!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

fquadt

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

fquadt

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

elaverdiere

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

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

Albert

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

bonste

I was looking for a solution for this too!

This is perfect, thank you all!