Menu
GETTING STARTED
CONTENT
UTILITIES
Menu

Overlay

You can browse this page to learn the overlay properties of the template.

In some cases, we would like to write on the photos. But because of the color of the photo, the text we wrote may not be legible enough and we may experience contrast problems. In order to prevent such situations, we developed 2 different overlays, blue and black. Let's examine how easy it is to use.

Overlay Gradient

								
<div class="imgfix h-200 overflow-hidden overlay-gradient opacity-10">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-gradient opacity-20">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-gradient opacity-30">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-gradient opacity-40">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-gradient opacity-50">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-gradient opacity-60">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-gradient opacity-70">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-gradient opacity-80">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-gradient opacity-90">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-gradient opacity-100">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

Overlay Blue

								
<div class="imgfix h-200 overflow-hidden overlay-blue opacity-10">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-blue opacity-20">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-blue opacity-30">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-blue opacity-40">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-blue opacity-50">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-blue opacity-60">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-blue opacity-70">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-blue opacity-80">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-blue opacity-90">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-blue opacity-100">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

Overlay Black

								
<div class="imgfix h-200 overflow-hidden overlay-black opacity-10">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-black opacity-20">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-black opacity-30">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-black opacity-40">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-black opacity-50">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-black opacity-60">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-black opacity-70">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-black opacity-80">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-black opacity-90">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>

<div class="imgfix h-200 overflow-hidden overlay-black opacity-100">
  <img src="../html/gradient/assets/images/photos/about/3.jpg" alt="">
</div>