Hover effect clipped to parent using Bootstrap

Question

I am trying to use Bootstrap and my own css to create a hover effect. The issue is that the parent container, the carousel, is clipping my hover effect.

The look I am going for 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 now:

This is what I am trying to achieve:

I’ve tried overriding the parent overflow elements to no avail.

The hover effect needs to:

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

Here’s the fiddle: Fiddle

What am I doing wrong?

Answer 1

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

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

JSFiddle

Answer 2

It doesn't seem easy to play with the overflow since the plugin already uses it.

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

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

However, the X overflow breaks the plugin style.

But it doesn't work at all on google chrome, so my advice would be not to use this plugin.

---

You would get almost the same problem with another plugin, because CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

Demo with Bootstrap Carousel (jsfiddle)

---

Maybe you should think about using some (homemade?) JavaScript, since the carousel requires it anyway.