CSSで画像にグラデーションアニメーションを作成する方法

Question

画像の下に画像ごとにdescription/titleというギャラリーがあります。ギャラリーラインごとに4つの画像があり、すべての画像が同じサイズになっています。

<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のコードは次のとおりです：

この

はHTMLコードです

.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の高さを持っている場合他のギャラリーよりも高くなります。ギャラリーには多くの画像がありますので、ギャラリーを整理しないでください。私の質問は、長い記述でいくつかの画像からfont-sizeを作成する方法は、.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; 
    }