how do i use hovering slide images on notepad++? - html

Question

I started a project in Notepad++ and I would like to create a slider on hover while using CSS. The problem is that I do not know if my picture (which I wanted to create a slider with) needs to be separated in 2 images or 1 merged picture. I also don't know if translate3d works in notepad++.
Here's what my HTML looks like:
<div class="college">
<img src="image.png" />
and here's my current 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 {
}
edit
hello again, after we've found out about my problem with hovering sliding images, i managed to make my own ligns of codes but now im stuck into another problem, while i was douing my code my images were going behind the background which i liked it very much but when i finished all of it, it stopped douing it ,i've tried using overflow: hidden and postion: absolute but i don't really get how it works especially since when i search what their fonction does. and i thought i was douing right but it seems it doesn't change anything at all,
so i would like to know how i manage to make my moving pictures to go out of the screen/ hide inside the background.
here what my css looks like
` .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);`
here is my 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

I'm not fully sure what you're asking but is this what you're wanting? If so you're more interested in transitions or animations, hover within the blue border
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);
}