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

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

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

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

<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;
}

برای حمایت از من رو تبلیغ زیر کنید.

مشاهده خروجی

برای حمایت از من رو تبلیغ زیر کنید.

نظرات۲

  1. امید ..

    ممنونم ازتون بیصبرانه منتظر اسلایدر html هستم بدون جاوا ...... اگه میشه تو این هفته بسازینش البته اگه وقت داشتین بازم ممنونم ازتون
  1. امید ..

    سلام محمد جان ممنون از زحماتت یه سوال داشتم میشه یه کاریش کرد خودش تصاویر عوض بشن مثلا 8ثانیه عوض بشن عین اسلایدر؟؟؟
    اگه شد ممنون میشم که منو کمک کنی به وبلاگم سر بزن کردمش تقریبا اسلایدر اما عوض نمیشن تصاویر مشکلش اینه تا وقتی که موس رو نبری رو تصویر عوض نمیشه اگه شد کمکم کن ممنون
  2. author

    پاسخ

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

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی