Wie verwende ich schwebende Folienbilder auf Notepad ++?

Question

Ich habe ein Projekt in Notepad ++ gestartet und ich würde gerne einen Schieberegler bei der Verwendung von CSS erstellen.

Das Problem ist, dass ich nicht weiß, ob mein Bild (mit dem ich einen Schieberegler erstellen wollte) in 2 Bildern oder 1 fusioniertem Bild getrennt werden muss.
Ich weiß auch nicht, ob translate3d in Notepad ++ funktioniert.

Hier ist, was meine HTML wie folgt aussieht:

<div class="college"> 
<img src="image.png" /> 

und hier ist meine aktuelle CSS:

body { 
    background: url("anotherimage.png") 33em 0% fixed no-repeat; 
    background-color: rgb(0,85,170); 
} 

.college { 
    margin-left: 100px; 
    margin-top: 325px; 
    overflow: hidden; 
} 

.college img { 

} 

.college img:hover { 

} 

bearbeiten

hallo wieder, nachdem wir über mein Problem herausgefunden haben mit schwebenden gleitbildern schaffte ich es, meine eigenen codes zu machen, aber jetzt bin ich in ein anderes problem eingedrungen, während ich meinen code meine bilder verdarb gingen hinter den Hintergrund, der mir sehr gut gefallen hat, aber als ich alles beendet habe, hörte es auf, es zu tun, ich habe versucht mit Überlauf: versteckt und Position: absolut, aber ich verstehe nicht wirklich, wie es funktioniert, besonders seit wann ich Suche was ihre Funktion tut. und ich dachte, ich würde richtig duschen, aber es scheint, dass es überhaupt nichts ändert,

so würde ich gerne wissen, wie ich es schaffen, meine bewegten Bilder aus dem Bildschirm zu gehen/verstecken im Hintergrund.

hier, was mein CSS sieht aus wie

` .college .image { 
    margin-left: 100px; 
    margin-top: 475px; 
    position: absolute 

} 
.college .imagesecond { 
transform: translate(0px,500px); 
transition: transform 1s ease-in-out 0.2s; 
border-radius: 8px; 

overflow: hidden 

} 
.college:hover > .imagesecond{ 
transform: translate(0,-200px); 
} 

.lycee .image { 
margin-left: 700px; 
margin-top: 500px; 
position: absolute 
} 
.lycee .imagefourth{ 
transform: translate(0px,500px); 
transition: transform 0.9s ease-in-out 0.2s; 
border-radius: 8px; 
overflow: hidden 
} 
.lycee:hover > .imagefourth{ 
transform: translate(0,-500px); 
} 
.formation .image{ 
margin-left: 1250px; 
margin-top:510px; 
overflow: hidden; 
} 
.formation .imagesixth{ 
transform: translate(0px,100px); 
transition: transform 1s ease-in-out 0.2s; 
border-radius: 8px; 
overflow: hidden 
} 
.formation:hover > .imagesixth{ 
transform: translate(0 ,-75 
0px);` 

hier ist mein html

<div class="saintemarie"> 
     <a href=""> 
      <div class="college"> 
       <img class="image imagefirst" src="choixcollege.png" /> 
       <img class="image imagesecond" src="pepepls.gif"/> 
      </div> 
     </a> 

     <a href="lyceesaintemarie.html"> 
      <div class="lycee"> 
       <img class="image imagethird" src="choixlyceepro.png" /> 
       <img class="image imagefourth" src="pepepls.gif" /> 
      </div> 
     </a> 
     <a href="c&fsaintemarie.html"> 
      <div class="formation"> 
       <img class="image imagefifth" src="choix 
       centre&formation.png" /> 
       <img class="image imagesixth" src="pepepls.gif" /> 
      </div> 
      </div> 
     </a 

Answer 1

ich nicht ganz sicher bin, was Sie fragen, aber das ist, was Sie wollen? Wenn ja sind Sie mehr daran interessiert, Übergänge oder Animationen, schweben in der blauen Grenze

https://jsfiddle.net/gevfeqk9/24/

.college { 
    margin: auto; 
    overflow: hidden; 
    border: 1px solid blue; 
    } 

    .college .image-1{ 
     transform: translate(-280px,0); 
     transition: transform 1s ease-in-out 0s; 
    } 
    .college .image-2{ 
     transform: translate(-560px,0); 
     transition: transform 1s ease-in-out 0s; 
    } 
    .college:hover .image-1,.college:hover .image-2{ 
    transform: translate(0,0); 
    }