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:

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?

The overflow on `.carousel-container` is containing it all and there's no way around it without removing it or moving the title element so that it doesn't get clipped. — cimmanon, Sep 20 '12 at 16:36
Seems like the jquery plugin you're using for the carousel is assigning inline styles. — merv, Sep 20 '12 at 23:52
Yes that is the case. Even if I remove the styles, the content is clipped. — rboarman, Sep 21 '12 at 17:21

score 2 · Accepted Answer · answered Sep 20 '12 at 21:50

2

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

answered Sep 20 '12 at 21:50

merv

67,214
13
180
245

Not a bad idea. I am trying acheive this: http://www.ebay.com/sch/Other-/26261/i.html?rt=nc&_dmd=2 – rboarman Sep 20 '12 at 23:14
1

Oh, I see now. Hmmm... Well, I'm going to leave this answer up, even though it may not be what you're looking for. You should put that link in the question. – merv Sep 20 '12 at 23:55

score 0 · Answer 2 · edited May 23 '17 at 12:13

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.

Hover effect clipped to parent using Bootstrap

2 Answers2

JSFiddle