How do I make one element change by hovering over another?

Question

I'm trying to do what many have asked before, but even after trying everything I still can't get the results I want.

I have an image 600px by 1600px, 4 images of 600px by 400px in a vertical line. I want to show 600px by 400px of the image at any one time. Ideally I would be able to hover over an element somewhere on my page and move the image upwards to reveal the other portions of the 600px by 400px image. In effect, I'd have 4 images viewable by hovering over 4 the elements.

I've tried various css3 and jquery solution but none have worked. I would appreciate any help with this.

HTML

<div class="mainimage">
    <div class="buttonsection">
        <div class="button1">Button 1</div>
        <div class="button2">Button 2</div>
        <div class="button3">Button 3</div>
        <div class="button4">Button 4</div>
    </div><!--end of buttonsection-->

    <div class="rollingimage">
        <img src="IMG/four-pics.png">
    </div><!--end of rollingimage--> 

</div><!--end of mainimage-->
</div><!--end of main content-->

CSS

.mainimage {
    position: relative;
    top: 0px;
    left: 0px;
    width: 900px;
    height: 400px;
    border: 2px solid #E78F25;
    margin: 0 10px 20px 0;
}

.buttonsection {
    width: 290px;
    height: 400px;
    position: relative;
    float: left;
}

.button1,
.button2,
.button3,
.button4 {
    display: inline;
    height: 98px;
    width: 290px;
    border: 1px solid #E78F24;
    text-align: center;
    float: left;
}


.rollingimage {
    width: 598px;
    height: 400px;
    position: relative;
    overflow: hidden;
    top: 0px;
    left: 0px;
    float: right;
}

jquery

$(document).ready(function(){
    $(".button1").hover(function(){
        $('.rollingimage').stop().animate({'top': '-200px'}, 1500);
    });
});

Here is the jsfidle: http://jsfiddle.net/dirtyd77/jCvYm/1/

Thanks yet again

Gary

Answer 1

You need to change the positioning of the image inside the div, not the div itself. To animate my example, you could add CSS transitions for better performance than JS animations.

http://jsfiddle.net/jCvYm/8/

$('.rollingimage').find('img')

Answer 2

Just for fun, no JS:

http://jsfiddle.net/coma/MTWdb/5/

HTML

<div id="foo">
    <a href="#">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
    <a href="#">Button 4</a>
    <div></div>
</div>

CSS

#foo {
    width: 400px;
    border: 2px solid #E78F25;
    position: relative;
}

#foo > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 200px;
    background: #fff url(http://placekitten.com/600/1600) no-repeat 0 0;
    transition: background-position .5s;
}

#foo > a {
    display: block;
    width: 200px;
    line-height: 100px;
    text-align: center;
    text-decoration: none;
}

#foo > a + a {
    border-top: 1px solid #E78F25;
}

#foo > a:nth-child(1):hover ~ div {
    background-position: 0 0;
}

#foo > a:nth-child(2):hover ~ div {
    background-position: 0 -400px;
}

#foo > a:nth-child(3):hover ~ div {
    background-position: 0 -800px;
}

#foo > a:nth-child(4):hover ~ div {
    background-position: 0 -1200px;
}

Answer 3

As Dom mentioned, the jsFiddle you provided didn't reference the jQuery library. It also didn't included any actual images, and only contained code for one of the three buttons. I doubt those were the original problems you were having, though. (The missing reference to jQuery might have been.)

Once I had those straightened out, I noticed that hovering the button caused the picture to slide out of the screen, instead of scrolling. The simplest way to fix that is to move the img element, instead of moving the div. (The more natural way would be to change the scroll position of the div, but I don't recall how to do that off the top of my head.)

Added CSS:

.rollingimage img {
    position: relative;
}

New JS:

$(document).ready(function(){
    $(".button1").hover(function(){
        $('.rollingimage img').stop().animate({'top': '0px'}, 1500);
    });
    $(".button2").hover(function(){
        $('.rollingimage img').stop().animate({'top': '-400px'}, 1500);
    });
    $(".button3").hover(function(){
        $('.rollingimage img').stop().animate({'top': '-800px'}, 1500);
    });
    $(".button4").hover(function(){
        $('.rollingimage img').stop().animate({'top': '-1200px'}, 1500);
    });
});

jsFiddle: http://jsfiddle.net/jCvYm/6/