0

I have used three images within a div. If I hover over the image, then the image should move slowly to the left side and the details should show up on the right side.

Then, if the cursor moves away, the image should move to its old position.

My Code is below.

In Html:

<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
 <div class="ch-info">  </div>
</div>

 <div class="bioinfo">
    <h2>Details of the image initially it should hide</h2>
 </div>
</li>
</ul>

css file

.ch-grid li .person-profile nav ul li {
    display: inline-block !important;
    height: 56px !important;
    margin: 0px !important;
    width: 36px !important;
}


.ch-img-1 { 
    background-image: url(../images/image.png);
}


.bioinfo {
    display: none;
    background: rgba(246,246,246, 0.8);
    font-size: 10px;
    padding: 15px 3px 3px 3px;
    text-align: justify;
}  

Jquery:

$('.ch-grid > li').hover(function() {
            $(this).css({position: 'relative', marginRight: 120});
            $(this).children('.bioinfo').show('slow').css({display: 'inline-block'});
}, function() {
     $(this).css({position: 'relative', marginRight: -10});
    $('.bioinfo').hide();

});    
3
  • Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking.
    – Ohgodwhy
    Dec 19, 2013 at 13:35
  • have to move the image div on left side when hover and how to implement in jquery
    – Alex
    Dec 19, 2013 at 13:43
  • here is your jsfiddle DEMO, just I don't see what your problem is. add more info to this fiddle to clarify your problem. Dec 19, 2013 at 13:56

2 Answers 2

1

If I understand correctly, you should be looking to do something like this. I've changed the $(this) selector you were using, to be a little more specific to the element that is being moved. Rather than the entire li , we are selecting the .ch-item of the hovered li.

Additionally, the .hide() .show() methods have been changed to .fadeIn() and .fadeOut().

In our animations, we can return the element back to its original position by moving it to 0px. We can do this because the element is relatively positioned, and not absolutely positioned. If you have any questions let me know!

http://jsfiddle.net/2ZKG3/8/

$('.ch-grid li').hover(function () {
    $('.ch-item', this).stop().animate({'left': '-100px'}, 300);
    $('.bioinfo', this).stop().fadeIn(300).css('display','inline-block');
}, function () {
    $('.ch-item', this).stop().animate({'left': '0px'}, 300);
     $('.bioinfo', this).stop().fadeOut(300);
});

.ch-img-1 {
    position: relative;
    background-image: url(https://lh4.googleusercontent.com/9Difi9bypu9-FoUsfFWpX6odYLLjXQk_q0aPxZBSFynecMOSLoKRKWRWIfZdXRGOdXMZCahrLBG6vWrwIeT-A26iDjTucgFVCP0Fuzr79BHW5kLJ3sw);
    width: 100px;
    height: 100px;
    background-size: 100px;
    display: inline-block;
    z-index: 2;
}
.bioinfo {
    display: none;
    background: rgba(246, 246, 246, 0.8);
    font-size: 10px;
    padding: 10px 20px;
    text-align: justify;
    position: absolute;
    left: 50px;
    margin-top: 20px;
}

Let me know if that isn't the desired effect you are going for. Hope this helps!

5
  • excellent but tootltip(.bioinfo) is not show.while moving to left.
    – Alex
    Dec 19, 2013 at 14:17
  • Hmmm... I can see it on my end. What browser are you using?
    – wrxsti
    Dec 19, 2013 at 14:19
  • can you share your skype id
    – Alex
    Dec 19, 2013 at 14:24
  • I'm at work, and skype is not accessible sadly.
    – wrxsti
    Dec 19, 2013 at 14:25
  • Just updated the script and the fiddle. Did that fix the problem?
    – wrxsti
    Dec 19, 2013 at 14:39
0

$(this).animate({'left' : '-30px' }, 1000, function() { }); Use animate.

3
  • I have used but no effect, my requirement is have to move the image div on left side when hover and how to implement in jquery. $('.ch-grid > li').hover(function() { $(this).animate({left : "-30px" }, 1000, function() { }); $(this).children('.bioinfo').show(); }, function() { $(this).animate({left : "-30px" }, 1000, function() { }); $('.bioinfo').hide(); });
    – Alex
    Dec 19, 2013 at 13:44
  • @Holybreath, your answer should use more explanation.
    – Andy
    Dec 19, 2013 at 14:04
  • @wrxsti answer showed the animate in action ;)
    – Holybreath
    Dec 19, 2013 at 14:52

Not the answer you're looking for? Browse other questions tagged or ask your own question.