چگونه از کلاس کاذب 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;
}

وقتی ماوس رو بلاک مورد نظرمون اومد ؛ بلاک مورد نظرمون یه کم شفاف میشه.

نظرات۲

ارسال نظر

  1. پایگاه سایبری المهدی (عج)

    سلام چطور افکت زوم بدم میخوام چند تا عکس کوچیک کنار هم وقتی  رفت روش زوم شه 
    امکان داره کد ریسپانسیو شه
  2. پاسخ مدیر

    سلام.

    .zoom {transition: transform .2s; /* Animation */ }
     .zoom:hover { transform: scale(1.5); /* (150% zoom) */ } 
  1. سید

    چه کاربردی دار د
  2. پاسخ مدیر

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