چگونه از کلاس کاذب hover در سی اس اس استفاده کنم؟

چگونه از کلاس کاذب hover در سی اس اس استفاده کنم؟

گام اول : کدنویسی اچ تی ام ال (html) ؛ ساختار بلاک مورد نظرمون رو ایجاد میکنیم. شامل عکس و عنوان عکس که می خواهیم افکت هاور را رویشان اعمال کنیم.

<div class="block"> <img title="" alt="" src="/park.jpg"> <div class="block-caption"> عنوان عکس مورد نظر </div> </div>

گام دوم : کدنویسی سی اس اس (css) ؛

.block{
display:block;
transition:0.3s ease-in all;
}گام سوم : افزودن کلاس کاذب هاور یا افکت آمدن ماوس روی المنت های مورد نظرمون.توی این قسمت میخواهیم افکت آمدن ماوس رو بلاک اصلی یا همون نحوه ی استفاده از کلاس کاذب hover در سی اس اس رو بگم.

.block:hover{
opacity:0.8;
}وقتی ماوس رو بلاک مورد نظرمون اومد ؛ بلاک مورد نظرمون یه کم شفاف میشه.