اختصاصی ساخت یک Hover زیبا با CSS

TaurohtaR

TaurohtaR

The Ranger
مدیر بخش
سلام دوستان، این Hover رو خودم چند ماه پیش کشف کردم :دی گفتم آموزش بذارم براتون فیض ببرید :دی


ابتدا همه ی آیتم هاتون که می خواین هاور بگیرن رو بندازید توی یک div به اسم parent

برای مثال :
کد:
<div class="parent">

div class="i1">  </div>>
div class="i2">  </div>>
div class="i3">  </div>>
div class="i4">  </div>>
</div>

سپس برای اینکه لینک دار بشن توی تگ a بندازید و لینک رو وارد کنید:

HTML:
<div class="parent">

<a href="#"><div class="i1">  </div></a>
<a href="#"><div class="i2">  </div></a>
<a href="#"><div class="i3">  </div></a>
<a href="#"><div class="i4">  </div></a>
</div>

در گام بعدی وارد CSS بشید و کد زیر رو به انتهاش وارد کنید،

HTML:
.parent a {

    opacity: 1;
    transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
}
.parent:hover a {
    opacity: 0.4;
}
.parent:hover a:hover {
    opacity: 1;

موفق باشید.
 
متن زیبا برای فرزند پسر - متن زیبا برای فرزند دختر - متن ادبی درباره برادر - کابل شارژر سامسونگ- خرید قاب گوشی- جواب آمیرزا- اسکرین شات سامسونگ - فلش کردن گوشی - اروس دیجیتال - قاب گوشی A54 - قاب گوشی s23 ultra -
بالا