Question

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

问题是我不知道我的照片（我想创建一个滑块）是否需要分成2张图像或1张合并图片。
我也不会＃39 ; t知道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 {

}

修改的

再次问好，在我们发现悬停滑动图像的问题之后，我设法制作了自己的代码标记，但现在我陷入了另一个问题，而我正在挖我的代码我的图像落后了我非常喜欢它的背景但是当我完成所有这一切时，它停止了它，我尝试使用溢出：隐藏和位置：绝对但我真的不知道它是如何工作的，尤其是当我搜索他们的功能。而且我以为我是正确的，但它似乎根本没有改变任何东西，

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

这是我的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);
   }

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

1 个答案: