Wie Schieben Sie Ein Bild Hinter Einem Anderen Auf Hover?

Ich versuche einen Effekt zu erstellen, wo eine Schallplatte (wir nennen es den hintergrund-Bild) schiebt sich von hinten ein Plattencover (Bild Vordergrund). Ich möchte dies tun mit so viel CSS wie möglich, aber ich verstehe, dass die LP-Folie in-und out reibungslos benötigen JQuery. Das Vordergrund-Bild vollständig verdunkelt sich der hintergrund und ich kann nicht herausfinden, wie man das hintergrund Bild verschieben, wenn die Maus über das Bild im Vordergrund. Ich möchte auch beide Bilder zu Anker, wenn möglich. Hoffe, dass das klar(ish)! Wenn jemand könnte mir helfen, ich wäre sehr dankbar, danke!

Hier ist, was im arbeiten mit bisher

<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:

Danke an alle für die Antworten, ich versuche zu verwenden, der in der ersten Kommentar zu diesem post, aber ich kann nicht für das Leben von mir bekommen, es funktioniert mich selbst! Könnte mir jemand helfen, sehen, wohin ich gehe falsch gemacht? Nochmals vielen Dank.

<!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;
}​
InformationsquelleAutor joshfarrant | 2012-06-01
  1. 2

    Können Sie es tun, rein mit css, indem diese Ihre vorhandenen 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 */
}

    Leider die animation funktioniert nur in neueren Browsern. Ältere Browser zeigen nur den Datensatz knallen-in/out, die möglicherweise oder möglicherweise nicht eine schreckliche Wirkung.

    Wenn Sie wollen, dass es funktioniert in allen Browsern, die Sie tun müssen ist die animation mit javascript.

    InformationsquelleAutor Sam Dufel
  2. 1

    Beginnen Sie mit diesem:

    $("#sleeve").hover(
    function(){
       $("#record").animate({left: '+=100',bottom: '+=100'}, 1750);
    },
    function(){
       $("#record").animate({left: '-=100',bottom: '-=100'}, 1750);  
    });

    Auf bewegen Sie den Eintrag Folien aus, wenn die Maus lässt sich die Hülse gleitet er zurück. Was möchten Sie genau haben, müssen Sie code auf Ihrem eigenen.

    Hier ist eine demo: http://jsfiddle.net/rniestroj/nZhbg/

    InformationsquelleAutor Robert Niestroj
  3. 0

    Willkommen zu StackOverflow.

    In der Regel, wie wir, die Benutzer, um post-code, den Sie zuvor versucht haben nur zu Fragen, uns für die Antwort, aber hier ist etwas, um Sie zu erhalten begann mit hover:

    $("selector").hover(function(){
  //do some code on hover
});

    Sind, und mit animation:

    $("selector").animate({
  //animate to these values
  left:250px,
});

    Vielleicht schauen Sie sich diese Dokumente für animation und Selektoren.

    Können Sie in der Lage, dies zu tun mit CSS3-animation, aber ich habe Ihnen jQuery, haben cross-browser-Unterstützung, und ermöglichen es Ihnen, mehr zu tun, kompliziertes Zeug, wenn Sie möchten.

    InformationsquelleAutor ACarter
Schreibe einen Kommentar