Search code examples
csstwitter-bootstrapjcarousellite

Hover effect clipped to parent using Bootstrap

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:

enter image description here

This is what I am trying to achieve:

enter image description here

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?

Solution

  • 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