سه افکت فوق العاده برای Hover تصاویر

سه افکت فوق العاده برای Hover تصاویر
در دنیای مدرن وب امروزی، راه های خلاقانه و مفید زیادی داریم برای به وجود آوردن افکت های زیبا و خارق العاده و بهترین راه برای ایجاد این افکت ها CSS3 هست، برگردیم به روزای گذشته، برای ایجاد همچین افکت هایی در وب نیاز داشتیم که به خوبی به جاوا اسکریپت مسلط باشیم ولی امروزه با استفاده از CSS3 و پشتیبانیش در اکثر مرورگرها ( بجز IE9 و نسخه های پایین تر ) میتونیم افکت های خارق العاده ای پیاده کنیم.
 
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید

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

افکت شماره یک

ساده ترین افکت هستش، توی این افکت عکس به سمت بالا پرواز میکنه و متن عکس نمایش داده میشه.

کد HTML

از یک لیست نامنظم استفاده میکنیم و عکس و متن مورد نظرمون رو داخل میزاریم، دقت کنید که دو کلاس demo-1 و effect رو باهم دیگه به المنت اصلیمون میدیم، کد مورد نظر به صورت زیر میشه
<ul class="demo-1 effect">
    <li>
            <h2>This is a cool title!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

کد CSS

به المنتی که کلاس demo-1 داشت پوزیشن relative میدیم و بعد بهش عرض و ارتفاع میدیم، همچنین یه سری خصوصیات دلخواه به تگ های h2 و p میدیم، حالا برای کلاس effect که وظیفه ی افکت تصویر مارو به عهده داره پوزیشن absolute میدیم و margin ای میدیم که عکس از صفحه بیرون بیوفته و با استفاده از transition در CSS3 این کار رو با افکت نرم و آرومی انجام میدیم، کد مورد نظرمون به شکل زیر میشه :
.demo-1 {
    position:relative;
    width:300px; 
   height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-1 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-1 h2 {
    font-family:'Lato';
    font-size:20px;
    line-height:24px;
    margin:0;
}
.effect img {
    position:absolute;
    margin:-15px 0;
    right:0;
    top:0;
    cursor:pointer;
    -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
    -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
    -o-transition:top .4s ease-in-out,right .4s ease-in-out;
    transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
    top:-230px;
    right:-330px;
    padding-bottom:200px;
    padding-left:300px
}

 افکت شماره دو

افکت شماره دوم به این صورت هست که تصویر مارو به آرومی کمی پایین میده و توضیحات عکس در بالای تصویر نمایش داده میشه.

کد HTML

این کد دقیقا مثل کد مثال قبلی هست با این تفاوت که از کلاس demo-2 استفاده کردیم و به تگ های h2 و p کلاس zero دادیم
<ul class="demo-2 effect">
    <li>
       <h2 class="zero">This is a cool title!</h2>
       <p class="zero">Lorem ipsum dolor sit amet.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

کد CSS

این کد هم همانند کد مثال قبل هست با این تفاوت که در این کد با استفاده از bottom:-96px عکسمون رو به سمت پایین میفرستیم و با استفاده از transition در CSS3 کاری میکنیم که این عملیات به آرامی انجام بشه
.demo-2 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-2 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-2 h2 {
    font-size:20px;
    line-height:24px;
    margin:0;
    font-family:'Lato'
}
.effect img {
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out
}
.effect img.top:hover {
    bottom:-96px;
    padding-top:100px
}
h2.zero,p.zero {
    margin:0;
    padding:0
}

افکت شماره سه

در این افکت تصویر شما مانند یک کارت به صورت پشت و رو برمیگرده و با ناپدید شدن عکس، متن مورد نظرمون نمایش داده میشه.

کد HTML

این کد کمی با کدهای قبلی فرق میکنه، در این کد از تگ figure در HTML5 استفاده میکنیم و تگ figurecaption رو در درونش قرار میدیم، همچنین برای لیست نامرتبمون از کلاس demo-3 استفاده میکنیم.
<ul class="demo-3">
    <li>
        <figure>
            <img src="images/image1.jpg" alt=""/>
            <figcaption>
                <h2>This is a cool title!</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
            </figcaption>
        </figure>
    </li>
</ul>

کد CSS

در این کد برای figcaption از rotate transform:-180 degree استفاده میکنیم و زمانی که ماوس بر روی المنت ما قرار گرفت مقدارش به 180 برسه و افکت پشت و رو شدن انجام بشه.
.demo-3 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}
.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}
.demo-3 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}
.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.demo-3 figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}
.demo-3 figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .

نظرات و سوالات کاربران

ارسال پاسخ سوزان
سوزان
سه شنبه ۲۱ فروردین ۱۳۹۷ ۰۰:۳۷
سلام. خسته نباشید. اینا رو دقیقا باید کجای نوشته قرار داد؟ من تازه دارم با وردپرس کار میکنم و میخوام عکسهام این افکت ها رو داشته باشند. جایی هست که کامل توضیح داده باشه؟ متشکرم
ارسال پاسخ moein
moein
جمعه ۲۹ بهمن ۱۳۹۵ ۲۱:۲۴
اقا دمت گرم عالی بود
ارسال پاسخ Amin Alizadeh
Amin Alizadeh
سه شنبه ۱۵ اردیبهشت ۱۳۹۴ ۱۱:۰۳

cool =)