Question

我有一个显示图像的方法，点击后会显示一个简单的标题。标题只是出现，并在点击时消失。然而，当一个过渡或效果显示并消失时，移动/淡化标题会更有趣。

问题

如何使用CSS中的CSS / HTML为标题添加移动/淡入淡出效果   现有代码？

演示

HTML

<div class="gallery-image">
    <input type="checkbox" id="gallery" />
    <label for="gallery">
        <div class="gallery-image-icon">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Georges_Seurat_026.jpg/309px-Georges_Seurat_026.jpg" alt=“Gallery." height="240" width="309">
        </div>
     </label>
     <div class="gallery-image-button">The quick brown fox jumps over the lazy dog.</div>
</div>

CSS

.gallery-image {
}
.gallery-image-icon {
    cursor: pointer;
}
#gallery {
    display:none;
}
#gallery:not(:checked) ~ .gallery-image-button {
    display:none;
}
#gallery:checked ~ .gallery-image-button {
    display:block;
}

Answer 1

你走了：

#gallery:not(:checked) ~ .gallery-image-button {
    display:block;
    opacity:0;
    transition: all .5s ease-in-out;
}
#gallery:checked ~ .gallery-image-button {
    display:block;
    opacity:1;
    transition: all .5s ease-in-out;
}

Answer 2

这是有一些动作的过渡

＆＃13;

.gallery-image-button {
  position: relative;
  top: -30px;
  opacity: 0;
}

#gallery:not(:checked)~.gallery-image-button {
  position: relative;
  display: block;
  opacity: 0;
  top: -30px;
  transition: all .5s ease-in-out;
}

#gallery:checked~.gallery-image-button {
  display: block;
  opacity: 1;
  top: 0;
  transition: all .5s ease-in-out;
}

input {
  display: none;
}

＆＃13;

<div class="gallery-image">
  <input type="checkbox" id="gallery" />
  <label for="gallery">
        <div class="gallery-image-icon">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Georges_Seurat_026.jpg/309px-Georges_Seurat_026.jpg" alt=“Gallery." height="240" width="309">
        </div>
     </label>
  <div class="gallery-image-button">The quick brown fox jumps over the lazy dog.</div>

＆＃13;

在现有代码中使用CSS / HTML添加移动/淡入淡出过渡或效果

2 个答案: