آموزش افکت محو نمودن یک تصویر بر روی تصویری دیگر با سی اس اس

در این مطلب می خواهم نحوه ی پنهان کردن یک تصویر و نمایش تصویر دیگر با سی اس سی را آموزش بدهم ، امیدوارم براتون مفید باشه.( آموزش درخواستی کاربر)

مرحله اول  : با استفاده از اچ تی ام ال یک باکس هم اندازه با تصویر مورد نظرمون ایجاد میکنیم.

<div class="balochdesign"></div>

مرحله دوم : سپس تصاویر مورد نظرمون رو داخل باکس میگذاریم. برای هر تصویر یک نام کلاس در نظر می گیریم. (برای اعمال استایل)

<div class="balochdesign">
  <img class="ax1" src="http://lorempixel.com/200/200" />
  <img class="ax2" src="http://lorempixel.com/200/200/sports" />
</div>

مرحله سوم : کدنویسی سی اس اس رو شروع میکنیم. دقت کنید که اندازه تصاویر استفاده شده تو این مثال ۲۰۰*۲۰۰ پیکسل هست ، پس اندازه باکس اصلی هم باید همین مقدار رو داشته باشد همچنین balochdesign نام کلاس باکس اصلی هست.

    – استایل مورد نظر را به باکس اصلی اعمال میکنیم.

.balochdesign{
  width:200px;
  height:200px;
  position:relative;
  overflow:hidden;
}

    – استایل بخش تصاویر باکس رو اعمال می کنیم. این قطعه کد تمام عکس های که داخل باکس اصلی هستن رو شامل می شود.

.balochdesign img{
  transition:2s all;
  position:absolute;top:0px;
  width:100%;
}

    – استایل مورد نیاز تصاویر که باید برای پنهان شدن  اعمال کنیم.دقت کنید در حالت معمولی عکس دومی میاد رو عکس اولی برای اینکه عکس اولی رو در لایه ی بالاتر قرار بدهیم از z-index استفاده میکنیم ، برای لایه ی بالاتر باید مقدار بیشتری نسبت به لایه ی زیرین اعمال کنیم.

.ax1{z-index:2;}.ax2{z-index:1;}

    – استایل حالت قرار گرفتن ماوس رو تصویر رو اعمال می کنیم.

.balochdesign:hover .ax1{
  opacity:0;
}

مشاهده خروجی