Как сделать градиентную анимацию в изображении с помощью 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; 
    }