Hover effect clipped to parent using Bootstrap
-
03-07-2021 - |
Pergunta
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?
Solução
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
Outras dicas
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.