如何在記事本++上使用懸停幻燈片圖像？

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