Question

I am trying to create a row of images and on hover – display more information about the item such as price and links to the item. On hover right now, the box containing more information (in yellow) is being displayed below the item and I would like it to be displayed as one element with the information to the right and the item picture to the left. I also do not want it to slide the next item over but have the yellow box of information display on top of the next item. It is pretty hard to explain so take a look at the basic code: http://jsfiddle.net/ryanabennett/bFZDL/1/

As you probably can tell from the question I am pretty new to coding and have tried forever with different position elements but nothing seems to be working. Hopefully you can help.

Here is my HTML:

<div class="productbox">
 <div class="livitem">
  <div class="Livwidgetexpandimg">
   <a href="#"><img src="#" class="popupbox" /></a>
     <div class="popup"></div>
   </div>
  </div>
 </div>
<div class="productbox">
  <div class="livitem">
    <div class="Livwidgetexpandimg">
      <a href="#"><img src="#" class="popupbox" /></a>
     <div class="popup"></div>
   </div>
  </div>
 </div>

Here is my CSS:

.productbox{
float: left;
height: 150px;
margin-left: 5px;
overflow: hidden;
}

.livitem{
float: left;
position: relative;
top: 3px;
}

.livitem:hover{
background: yellow;
}

.Livwidgetexpandimg{
background: blue;
height: 75px;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
padding: 5px;
width: 75px;
float: left;
}

.popupbox{
border: medium none;
height: 75px;
width: 75px;
}

.popup{
background: yellow;
display: none;
float: left;
height: 122px;
margin-left: -10px;
opacity: 0;
width: 175px;
z-index: 50;
}

Here is my JQuery:

$(function () {
    $('.livitem').each(function () {
        var distance = 10;
        var time = 200;
        var hideDelay = 1;

        var hideDelayTimer = null;

        var beingShown = false;
        var shown = false;
        var trigger = $('.Livwidgetexpandimg', this);
        var info = $('.popup', this).css('opacity', 0);


        $([trigger.get(0), info.get(0)]).mouseover(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                // don't trigger the animation again
                return;
            } else {
                // reset position of info box
                beingShown = true;

                info.css({
                    top: 10,
                    left: -3,
                    display: 'block'
                }).animate({
                    top: '-=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });
            }

            return false;
        }).mouseout(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.animate({
                    top: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    info.css('display', 'none');
                });

            }, hideDelay);

            return false;
        });
    });
   });

Hopefully you will be able to help me…

Answer 1

Think this is what you are looking for: http://jsfiddle.net/vCbMt/1/

I’d compare this against your current code to see the changes, I suspect more could be stripped to make it work better. Essentially you need some absolute positioning and clever z-index work.

This example is only tested in Chrome. It is highly likely that some additional css will be required to get the z-index to work in IE. This is a fundamental issue in IE, lots of topics here and elsewhere deal with the fixes (hint: build up the stack using position relative)

I hope this helps!