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

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

شیوه کار به این صورت است که یک <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%);

 

آیا این مطلب برای شما مفید بود؟

دسترسی سریع

ثبت دامنه

ثبت دامنه

فالوور و لایک

افزایش فالوور و لایک

طراحی لوگو

طراحی لوگو

طراحی سایت

طراحی سایت

هاست لینوکس

هاست لینوکس

افزایش بازدید

افزایش بازدید
 پرینت این مقاله

در همین زمینه

چگونه به چک باکس توسط CSS3 استایل بدهیم

همان طور که می دانید استایل دهی به چک باکس ها و دکمه های رادیویی توسط CSS بسیار محدود و در بعضی...

ایجاد انیمیشن Curl در CSS3

ساخت انیمیشن Curl با استفاده از CSS3 شیوه ی کار به این صورت است که ابتدا یک div در html تعریف...

CSS چیست و چه کاربردی دارد ؟

تاریخچه CSS قبل از سال 1995 زبان HTML یک زبان بسیار ساده بود که فقط با هدف نمایش متون و گاها...

تغییر و تنظیم فونت font در CSS

فونت چیست ؟ به زبان ساده به شکل ظاهری یک حرف در یک زبان نوشتاری که از اصولی خاصی پیروی می کند...