Comment puis-je utiliser des images de diapositives planantes sur notepad ++?

Question

J'ai commencé un projet dans Notepad ++ et je voudrais créer un curseur sur hover en utilisant CSS.

Le problème est que je ne sais pas si ma photo (avec laquelle je voulais créer un curseur) doit être séparée en 2 images ou 1 image fusionnée.
Je ne sais pas non plus si translate3d fonctionne dans le bloc-notes ++.

Voici ce que mon HTML ressemble à:

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

et voici mon CSS actuel:

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 { 

} 

modifier

Bonjour à nouveau, après que nous avons découvert au sujet de mon problème avec des images glissantes, j'ai réussi à faire mes propres codes de codes mais maintenant je suis coincé dans un autre problème, pendant que je doublais mon code mes images allaient derrière le fond que je l'aimais beaucoup mais quand j'ai fini tout cela, il a cessé de le doucher, j'ai essayé d'utiliser overflow: caché et postion: absolu mais je ne comprends pas vraiment comment cela fonctionne surtout depuis quand je chercher ce que leur fonction fait. donc je pensais que je doue droit mais il semble qu'il ne change rien du tout,

donc je voudrais savoir comment je parviens à faire de mes images en mouvement pour sortir de l'écran/cacher à l'arrière-plan.

ici ce que mon css ressemble

` .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);` 

voici mon 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

Je ne suis pas tout à fait sûr de ce que vous demandez, mais est-ce que vous vouloir? Si oui, vous êtes plus intéressés par des transitions ou des animations, vol stationnaire à l'intérieur de la bordure bleue

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); 
    }