-
Posts
-
I use both “slightly increase image” and caption with overlay. The image increases in width and becomes wider than the overlay.
Is this a bug or normal behaviour? How to fix it?
Many thanks! :)
Hi Steve,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.av-caption-image-overlay-bg { min-height: 190px; min-width: 200px; left: -10px; }If you need further assistance please let us know.
Best regards,
VictoriaThank you, Victoria. This works, but not quite what I was after. This increases the overlay, to match the size of the enlarged image.
The image increases in width, which breaks the look I’m after. Is there a way to make the image increase inside of the 180×180. Or else, (even better) to make it uniformly increase in height as it increases in width?
Many thanks in advance!
Hi,
The image increases in width, which breaks the look I’m after.
The option “slightly increase image” does that which is what was set in the first place. Please try this css code to limit the width of the image container.
.av-hover-grow { max-width: 180px; max-height: 180px; }You may need to apply a unique css class attribute to those images because this modification will affect every image element in the site.
Best regards,
IsmaelThanks for this! :)
So, I’d use
my-unique-css-class {
max-width: 180px;
max-height: 180px;
}
Or do I need to ad anything else? Not sure how to use css corretly with the css classes.
Thanks :)Hi Steve,
A class always has a dot in front of it, so in your case it would look like this:
.my-unique-css-class { max-width: 180px; max-height: 180px; }Best regards,
Rikard
- The topic ‘Image mouseover overlay is smaller than the image’ is closed to new replies.