Home/ Questions/Q 8027397
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T23:47:56+00:00

I’m trying to create an effect where an LP record (we’ll call it the

  • 0

I’m trying to create an effect where an LP record (we’ll call it the background image) slides out from behind a record sleeve (foreground image). I’d like to do this with as much CSS as possible, however I understand that having the LP slide in and out smoothly will require JQuery. The foreground image completely obscures the background image and I can’t figure out how to move the background image move when hovering over the foreground image. I also want both images to be anchors if possible. Hopefully that’s clear(ish)! If anyone could help me out I’d be extremely grateful, thanks!

Here’s what im working with so far

<div id="container">
  <img src="Record.png" width="200" height="200" id="record"/>
  <img src="Sleeve.png" width="200" height="200" id="sleeve" />
</div>

<!--CSS-->
#container {
    background-color: aqua;
    width: 500px;
    height: 400px;
    position: relative;
}

#record {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 1;
}

#sleeve {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 10;
}

EDIT:

Thanks all for the answers, I’m trying to use the one given in the first comment to this post, but I can’t for the life of me get it to work myself! Could anyone help me see where I’m going wrong? Thanks again.

<!DOCTYPE html>
<html>

        <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="testing.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<body>

<div id="container">
  <img src="http://cdn1.iconfinder.com/data/icons/oldschool_babasse/Png/Hardware/CD%20oldSchool.png" width="200" height="200" id="record"/>
  <img src="http://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Box_Grey.png" width="200" height="200" id="sleeve" />
</div>​

<script>

$('#container').hover(function() {
    var record = $('img:eq(0)', this);
    record.stop(1,0).animate({
        left: '200px'
    }, 1000, function() {
        record.css('z-index', 11).stop(1, 0).animate({
            left: '0px'
        }, 1000);
    });
}, function() {
    var record = $('img:eq(0)', this);
    record.stop(1,0).animate({
        left: '200px'
    }, 1000, function() {
        record.css('z-index', 1).stop(1, 0).animate({
            left: '0px'
        }, 1000);
    });
});​

</script>

</body>
</html>

<!--CSS-->

#container {
    width: 400px;
    height:200px;
    position: relative;
    overflow:auto;
}

#record {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 1;
}

#sleeve {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 10;
}​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do it purely with css by adding this to your existing code:

    #record {
  -webkit-transition: left 0.5s ease-out; 
     -moz-transition: left 0.5s ease-out; 
      -ms-transition: left 0.5s ease-out; 
       -o-transition: left 0.5s ease-out; 
          transition: left 0.5s ease-out;
}

#container:hover #record {
    left: 100px;  /* This is assuming you want it to slide from left-to-right */
}

    Unfortunately, the animation will only work in newer browsers. Older browsers will just show the record popping in/out, which may or may not be a horrible effect.

    If you want it to work in all browsers, you’ll need to do the animation with some javascript.

    • 0