Search code examples
jqueryhtmlcsssliderhint

CSS Jquery Hint for slider and overflow: hidden

I have designed a Slider that works perfectly (As you can see below)

Pizza slider

Now I'm gonna a beautiful fancy hint for each item in my slider that pops up with mouse hover and shows some information about the pizza. I created a pilot that works perfect.

Hint

The problem is since I had to make the slider overflow: hidden nothing can go over borders. I read a lot of articles and questions. Apparently the solution most be overflow-y: hidden but it doesn't work! Both overflow-x and overflow-y cut off all edges.

What is the best way to hide the wide slider and add popup hint to each item?

Solution

  • you can put the hint container outside your slider element, and make it absolutely positioned. you can position "hint" via jquery offset() of the clicked element.