ساخت یک روکش شناور از بالا روی تصویر در CSS

ساخت روکش شناور از بالا روی تصویر

شیوه کار به این صورت است که یک <div> به عنوان چهارچوب یا ظرف کلی داریم که تصویر و روکش مورد نظر داخل آن قرار دارند. این چهارچوب کلی را با کلاس container مشخص میکنیم

<div class="container">

</div>

سپس تصویر و overlay مورد نظر را به آن اضافه میکنیم. توجه داشته باشید که یک <div> با کلاس text نیز جهت نمایش متن داخل overlay یا روکش قرار می دهیم. 

<div class="container">
        <img src="chavoshi.jpg" class="image" alt="chavoshi">
        <div class="overlay">
            <div class="text">
                Mohsen Chavoshi
            </div>
        </div>
 </div>

خصوصیت display در کلاس container را برابر relative قرار داده و خصوصیت عنصر <div> با کلاس overlay را برابر absolute قرار می دهیم تا بتوانیم آن رادقیق روی تصویر قرار دهیم. 
 

.container {
     width: 30%;
     position: relative;
    }
.image {
    display: block;
    width: 100%;
    height: auto;
    }
.overlay {
   position: absolute;
   background-color: rgba(0,0,255,.7);
   top: 0;
   left: 0;
   width: 100%;
   height: 0;
   transition: 1s ease;
   overflow: hidden;
  }

روند کلی به این صورت است که مقدار خصوصیت height برای کلاس overlay را برابر 0 قرار می دهیم و تعیین می کنیم بعد از حرک موس روی کلاس container مقدار خصوصیت height برای کلاس overlay برابر 100% شود. این سبب می شود تا بعد hover شدن موس روکش روی تصویر نمایان شود.
 

.container:hover .overlay {
       height: 100%;
     }

ضمنا برای ایجاد افکت یا بهتر بگوییم برای اجرای کندتر روند hover در کلاس overlay مقدار زمان اجرای آنرا برای خصوصیت transition برابر 1s قرار می دهیم. 
 

transition: 1s ease;

حال برای نمایش متن در وسط صفحه نیز کلاس text را اینگونه تعریف می کنیم
 

.text {
   position: absolute;
   color: white;
   top: 50%;
   left: 50%;
   overflow: hidden;
   transform: translate(-50%,-50%);
 }

توجه داشته باشید که جهت وسط قرار گرفتن متن مقدار top و left را برابر 50% قرارداده ایم و همچنین مختصات اولیه را خارج اط صفحه نیز به شکل زیر تعیین کردیم.

transform: translate(-50%,-50%);