如何在圖像中使用css創建漸變動畫

Question

所以，我有一個圖像庫，它對圖像底部的每個圖像都有描述/標題。我爲每個畫廊線製作了四幅圖像，並且所有圖像的大小相同。

這是HTML代碼：

<div class="gallery"> 
    <div class="flag"> 
     <img src="image1.png"> 
     <div class="desc">some description</div> 
    </div> 
</div> 

<div class="gallery"> 
    <div class="flag"> 
     <img src="image2.png"> 
     <div class="desc">some description</div> 
    </div> 
</div> 

<div class="gallery"> 
    <div class="flag"> 
     <img src="image3.png"> 
     <div class="desc">some very long description</div> 
    </div> 
</div> 

<div class="gallery"> 
    <div class="flag"> 
     <img src="image4.png"> 
     <div class="desc">some description</div> 
    </div> 
</div> 

這是CSS代碼：

.gallery { 
      padding: 6px 6px; 
      float: left; 
      width: 24.99999%; 
     } 
.flag { 
      border: 1px solid #ccc; 
      padding: 5px; 
      box-shadow: 3px 3px 10px black; 
     } 
.flag img { 
      width: 100%; 
      height: auto; 
      box-shadow: 3px 3px 10px black; 
     } 
.desc { 
      padding: 10px; 
      text-align: center; 
      font-color: black; 
      font-weight: bold; 
      font-size: 18px; 
     } 

我的問題是，如果一些圖像具有長的描述一樣image3.png，.desc的高度會比另一個更高，而且我的畫廊中有很多圖像，所以它會使畫廊不合適。我的問題是，如何讓一些長描述的圖像的字體大小與.desc大小相一致？其餘的圖像仍然保持在.desc的字體大小。任何建議？在此之前感謝

Answer 1

一個快速解決方案將創建一個新的選擇器，具有較小的字體大小，只適用於您看到字體大小影響另一個圖像的情況。就像這樣：

<div class="gallery"> 
<div class="flag"> 
    <img src="image4.png"> 
    <div class="desc myNewSelector">some description</div> 
</div> 

 .desc { 
     padding: 10px; 
     text-align: center; 
     font-color: black; 
     font-weight: bold; 
     font-size: 18px; 
    } 
     .myNewSelector { 
     font-size: 16px; 
    }