如何为幻灯片创建淡入淡出效果？

时间：2020-10-07 23:55:29

标签： html css

基本上，我正在尝试创建一种具有悬停效果的幻灯片显示，以在图像上显示标题。我已经制作了幻灯片，但是无法产生悬停效果。我希望在用户将鼠标悬停在幻灯片中的图像上时放置鼠标悬停效果，并希望它尽可能淡入。用户将鼠标悬停在图像上后，我还希望在图像中间添加一个小的文字标题。我怎样才能做到这一点？任何帮助，将不胜感激。谢谢。这是我的代码。

body{
    margin: 0;
    padding: 0;
    background: #34495e;
}

.slidershow{
    width: 700px;
    height: 400px;
    overflow: hidden;
}

.middle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.navigation{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.bar{
    width: 50px;
    height: 10px;
    border: 2px solid #fff;
    margin: 6px;
    cursor: pointer;
    transition: 0.4s;
}

.bar:hover{
    background: #fff;
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides{
    width: 500%;
    height: 100%;
    display: flex;
}

.slide{
    width: 20%;
    transition: 0.6s;
}

.slide img{
    width: 100%;
    height: 100%;
}

#r1:checked ~ .s1{
    margin-left: 0;

}

#r2:checked ~ .s1{
    margin-left: -20%;
    
}

#r3:checked ~ .s1{
    margin-left: -40%;
    
}

#r4:checked ~ .s1{
    margin-left: -60%;
    
}

#r5:checked ~ .s1{
    margin-left: -80%;
    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="slidershow middle">
        <div class="slides">
            <input type="radio" name="r" id="r1" checked>
            <input type="radio" name="r" id="r2">
            <input type="radio" name="r" id="r3">
            <input type="radio" name="r" id="r4">
            <input type="radio" name="r" id="r5">
            <div class="slide s1">
                <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
            </div>
            <div class="slide">
                <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
            </div>
            <div class="slide">
                <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
            </div>
            <div class="slide">
                <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
            </div>
            <div class="slide">
                <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
            </div>
        </div>
        <div class="navigation">
            <label for="r1" class="bar"></label>
            <label for="r2" class="bar"></label>
            <label for="r3" class="bar"></label>
            <label for="r4" class="bar"></label>
            <label for="r5" class="bar"></label>
        </div>
    </div>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

好吧，让我们先看一下悬停时的淡入，然后再添加文字叠加层。

悬停时的淡入图像

这意味着从具有半透明设置（例如opacity:0.5，然后悬停将其更改为opacity:1。我们还希望它褪色，因此我们设置了transition属性。因此，我们需要对您的代码段进行以下更改：

.slide img {
    opacity: 0.5;             /* Image has 50% opacity when it is loaded */
    transition: opacity 1s;   /* Set a 1 second transition effect of the opacity */
    /* Rest of CSS...*/
}
.slide:hover img {
    opacity: 1;               /* Make the image 100% opacity when the slide is hovered */
}

淡入淡出文字叠加

我们要做的第一件事是添加要显示的文本。我们可以将其添加为div类中的新slide，并为其提供一个新类（例如imagecaption），以便在CSS中定位它。
您已经有一个可将文本放置在绝对位置元素中间的类，因此我们可以使用它来处理位置：

<div class="slide">
  <img src="https://example.com/myimage.jpg">
  <div class="imagecaption middle">This is some text</div>
</div>

对于文本，我们希望它在开始时隐藏，并在悬停时淡入，因此我们将不透明度设置为0，并在悬停时将其更改为1，并使用transition属性获得淡入淡出效果

.imagecaption {
    opacity: 0;               /* Text is not visible when it is loaded */
    transition: opacity 1s;   /* Set a 1 second transition effect of the opacity */
}

.slide:hover .imagecaption {
    opacity: 1;               /* Text is made 100% visible when the slide is hovered */
}

工作示例：将所有这些放在一起：

body {
  margin: 0;
  padding: 0;
  background: #34495e;
}

.slidershow {
  width: 700px;
  height: 400px;
  overflow: hidden;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.bar {
  width: 50px;
  height: 10px;
  border: 2px solid #fff;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}

.bar:hover {
  background: #fff;
}

input[name="r"] {
  position: absolute;
  visibility: hidden;
}

.slides {
  width: 500%;
  height: 100%;
  display: flex;
}

.slide {
  width: 20%;
  transition: 0.6s;
}

.slide img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  transition: opacity 1s;
}

.imagecaption {
  font-size: 2em;
  opacity: 0;
  transition: opacity 1s;
}

.slide:hover img {
  opacity: 1;
}

.slide:hover .imagecaption {
  opacity: 1;
}

#r1:checked~.s1 {
  margin-left: 0;
}

#r2:checked~.s1 {
  margin-left: -20%;
}

#r3:checked~.s1 {
  margin-left: -40%;
}

#r4:checked~.s1 {
  margin-left: -60%;
}

#r5:checked~.s1 {
  margin-left: -80%;
}
<div class="slidershow middle">
  <div class="slides">
    <input type="radio" name="r" id="r1" checked>
    <input type="radio" name="r" id="r2">
    <input type="radio" name="r" id="r3">
    <input type="radio" name="r" id="r4">
    <input type="radio" name="r" id="r5">
    <div class="slide s1">
      <img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
      <div class="imagecaption middle">This is some text</div>
    </div>
    <div class="slide">
      <img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
      <div class="imagecaption middle">This is some more text</div>
    </div>
    <div class="slide">
      <img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
    </div>
    <div class="slide">
      <img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
    </div>
    <div class="slide">
      <img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
    </div>
  </div>
  <div class="navigation">
    <label for="r1" class="bar"></label>
    <label for="r2" class="bar"></label>
    <label for="r3" class="bar"></label>
    <label for="r4" class="bar"></label>
    <label for="r5" class="bar"></label>
  </div>
</div>

请注意，如果不使用javascript，您将遇到一些问题，例如在悬停时更改非子代的CSS，例如当您将幻灯片悬停在幻灯片上时，它会显示100％的不透明度，但是当您悬停无关的导航时，该图像将不再发生悬停效果。

答案 1 :(得分：1)

请检查代码段和注释，以了解这是否是您想要的。 

<mwc-icon-button icon="fa-linkedin" slot="actionItems"></mwc-icon-button>
<mwc-icon-button class="fab fa-linkedin" icon="linkedin" slot="actionItems"></mwc-icon-button>

* {
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    background: #34495e;
}

.slidershow{
    width: 700px;
    height: 400px;
    overflow: hidden;
}

.middle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.navigation{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.bar{
    width: 50px;
    height: 10px;
    border: 2px solid #fff;
    margin: 6px;
    cursor: pointer;
    transition: 0.4s;
}

.bar:hover{
    background: #fff;
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides{
    width: 500%;
    height: 100%;
    display: flex;
}

.slide{
    width: 20%;
    transition: 0.6s;
}

.slide > h2 {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 30px);
    text-align: center;
    /*  text-shadow: 0 2px 0 #000; */
    padding: 15px;
    background: rgba(255,255,255,.6);
    color: #333;
    font-size: 18px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    transition: all .5s ease;
    z-index: 2;
}

.slides .slide:hover > h2 {
    visibility: visible;
    opacity: 1;
}

.slide img{
    width: 100%;
    height: 100%;
}

#r1:checked ~ .s1{
    margin-left: 0;

}

#r2:checked ~ .s1{
    margin-left: -20%;

}

#r3:checked ~ .s1{
    margin-left: -40%;

}

#r4:checked ~ .s1{
    margin-left: -60%;

}

#r5:checked ~ .s1{
    margin-left: -80%;
}

#r1:checked ~ .navigation [for="r1"] {background: #fff}
#r2:checked ~ .navigation [for="r2"] {background: #fff}
#r3:checked ~ .navigation [for="r3"] {background: #fff}
#r4:checked ~ .navigation [for="r4"] {background: #fff}
#r5:checked ~ .navigation [for="r5"] {background: #fff}

相关问题
最新问题