Hover effect cropped with parent using Bootstrap

Question

I am trying to use Bootstrap and native CSS to create a hover effect. The problem is that the parent container, the carousel, cuts off my hover effect.

The look I'm going to is something like this (hover over items with long descriptions):

http://www.ebay.com/sch/Other-/26261/i.html?rt=nc&_dmd=2

This is what my attempt looks like:

This is what I am trying to achieve:

Ive tried to override parent overflow elements to no avail.

The freeze effect should:

• Same size for all images in the carousel
• Overwrite any content below it

Here is the script: Fiddle

What am I doing wrong?

Answer 1

If you are using Bootstrap, why not just use Popover ?:

$('.thumb-hover').popover({ title: "This is a title", content: "This is a test", trigger: 'hover', placement: 'bottom' }); 

Jsfiddle

Answer 2

It seems that playing with overflow is impossible, as the plugin already uses it.

You can achieve some interesting results by setting both X and Y overflow to visible: demo (jsfiddle)

 .carousel-container:hover { overflow-y: visible!important; overflow-x: visible!important; } 

However, overflow X destroys the plugin style.

But this doesn’t work at all on google chrome, so my advice is not to use this plugin.

---

You will get almost the same problem with another plugin, because CSS-x overflow: visible; and overflow-y: hidden; causing a scroll problem

Demo with Bootstrap Carousel (jsfiddle)

---

Perhaps you should consider using some kind of (home?) JavaScript, as the carousel still requires.