درود خدمت شماا علاقه مندان به مباحث آموزش برنامه نویسی و طراحی وب. امروز با یک آموزش ویژه از سری آموزش های طراحی وب در خدمت شما هستم. در این آموزش قصد داریم تا با نحوه ساخت روکش شناور روی تصویر از بالا توسط CSS3 آشنا شویم. پس با ما همراه باشید.
ساخت روکش شناور از بالا روی تصویر
شیوه کار به این صورت است که یک <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%);
