Search code examples
wordpresscssoverlapvisual-composer

CSS transform scale getting overlapped in Visual Composer/Massive Addons

I have modified the Carousel (from Massive Addons for VC) slightly so that if you hover over an item, it grows. The problem is that it gets cut off by the item's borders when it grows.

Here is the page: http://tn-2017-12-vrshealth.pantheonsite.io/tn-2/

I need to use VC for several reasons, so that is why I thought to make a quick CSS change. Here is the code I have added for the animation:

.grow-image .mpc-carousel__item-wrapper {
    transition: all 300ms ease-in-out;
}
.grow-image .mpc-carousel__item-wrapper:hover {
    transform: scale(1.5, 1.5);
    transition: all 300ms ease-in-out;
    z-index: 1000;
}

While Z-index would be my usual fix, I can't seem to find a way to use it in the nesting of the items.

Here is a screenshot which shows how an item gets cut off when it grows:

enter image description here

Solution

  • That's because the parent div have an overflow property set to hidden, and you can't set it to visible as it will show the hidden slides of the carousel. I advice you to make the scale transform a bit smaller