既存のコードにCSS/HTMLを使用してムーブ/フェードトランジションまたはエフェクトを追加する

Question

イメージを表示するメソッドがあり、クリックすると簡単なキャプションが表示されます。キャプションはタップすると表示され消えます。しかし、トランジションやエフェクトが表示され消えていくと、キャプションを移動/フェードする方が面白いでしょう。

私は 既存のコードでCSS/HTMLを使用して、キャプションに移動/フェード効果を追加することができますどのように質問

？

デモ

https://codepen.io/anon/pen/gWYQoG

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

<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>

Answer 2

ここに行く：

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