如何在记事本++上使用悬停幻灯片图像？

Question

我在Notepad ++中创建了一个项目，我想在使用CSS时在悬停时创建一个滑块。

问题是，我不知道我的图片（我想创建一个滑块）需要在2图像或1合并图片分开。
我也不知道translate3d是否在记事本++中起作用。

这里是我的HTML是什么样子：

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

，这里是我目前的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 { 

} 

编辑

大家好，之后我们已经发现了我的问题与悬停滑动图像，我设法让自己的代码的标志，但现在我陷入另一个问题，而我是我的代码douing我的代码我很喜欢它的背景背后，但是当我完成了它的全部，它停止了它，我试图使用溢出：隐藏和位置：绝对，但我真的不知道它是如何工作，特别是因为当我搜索他们的功能。我以为我是对的，但它似乎并没有改变什么，

所以我想知道我是如何设法让我的移动图片走出背景屏幕/隐藏。

这里就是我的CSS看起来像

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

这里是我的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

我不完全知道你是问什么，但就是这个你想要什么？如果是的话你更感兴趣的过渡或动画，悬停蓝色边框

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