如何在图像中使用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; 
    }