در وب مدرن تکنیک‌های متعددی وجود دارد که می‌توان از آنها برای ایجاد تعاملات جالب استفاده کرد، اما ساده‌ترین و ظریف‌ترین آنها معمولاً CSS و به‌ویژه موارد اضافه شده با CSS3 است. در قدیم باید تکیه می‌کردیم روی جاوا اسکریپت برای این نوع افکت ها، اما به لطف پشتیبانی روزافزون از CSS3 در مرورگرها، اکنون می توان افکت هایی مانند این ها را بدون هیچ اسکریپتی تنظیم کرد. متأسفانه هنوز مرورگرهایی (IE9 و پایین تر) وجود دارند که از CSS3 پشتیبانی نمی کنند، بنابراین شما یا به مرورگرهای قدیمی نیاز دارید یا این افکت را به عنوان یک پیشرفت پیشرونده در نظر بگیرید. امروز، می‌خواهیم ببینیم چگونه می‌توانیم جلوه‌های شناور جالب، اما منظمی را برای نمایش و پنهان کردن شرح تصاویر اعمال کنیم. اگر ترجیح می دهید کد را دنبال کنید، می توانید فایل ها را از اینجا دانلود کنید

نسخه ی نمایشی 1

اولین نسخه ی نمایشی ساده ترین است: تصویر به سمت راست پرواز می کند تا عنوان را آشکار کند.

نشانه گذاری

برای اولین نسخه HTML خود از یک لیست نامرتب استفاده می کنیم و سپس عنوان و تصویر را داخل آن قرار می دهیم. توجه داشته باشید که کلاس را نیز اضافه می کنیم نسخه ی نمایشی-1 و اثر داخل تگ لیست نامرتب نشانه گذاری به این صورت خواهد بود:

<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="https://www.webdesignerdepot.com/2015/02/3-cool-css3-image-hover-effects/images/image1.jpg" alt=""/></li>
</ul>

CSS

برای CSS خود تنظیم خواهیم کرد نسبت فامیلی موقعیت یابی برای ما نسخه ی نمایشی-1 کلاس و سپس راه اندازی کنید عرض و ارتفاع. ما همچنین عناصر سرریز شده را پنهان خواهیم کرد. من همچنین چند سبک اساسی برای خودم قرار داده ام h2 و پ برچسب ها و همچنین تگ تصویر من. اکنون برای کلاس افکت خود، موقعیت یابی را روی آن تنظیم می کنیم مطلق و به آن یک لبه از -15 پیکسل به بالا و پایین. ما از CSS3 استفاده خواهیم کرد انتقال برای ایجاد یک اثر صاف. CSS ما به شکل زیر است:

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

نسخه ی نمایشی 2

نسخه ی نمایشی دوم ما تصویر را در حال لغزش به پایین نشان می دهد. این بدان معناست که وقتی ماوس خود را روی تصویر می‌کشید، عنوان بالای آن نمایان می‌شود.

نشانه گذاری

برای html نسخه ی نمایشی دوم خود، از نشانه گذاری بسیار مشابه به نسخه ی نمایشی اول خود استفاده خواهیم کرد. اما این بار استفاده خواهیم کرد نسخه ی نمایشی-2 به عنوان کلاس، و اضافه کنید صفر کلاس:

<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="https://www.webdesignerdepot.com/2015/02/3-cool-css3-image-hover-effects/images/image1.jpg" alt=""/></li>
</ul>

CSS

CSS ما تقریباً مانند نسخه آزمایشی اول خواهد بود، با این تفاوت که این بار با تنظیمات خاصیت تصویر خود را به سمت پایین حرکت می دهیم. پایین تا -96 پیکسل. ما همچنین از 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
}

نسخه ی نمایشی 3

برای آخرین نسخه ی نمایشی خود، یک افکت کارت برگردان ایجاد می کنیم. این به این معنی است که وقتی ماوس خود را نگه دارید روی تصویری که آن را به اطراف می چرخاند روی محور آن برای آشکار کردن توصیف است.

نشانه گذاری

برای آخرین نشانه‌گذاری نمایشی، از ساختار متفاوتی استفاده خواهیم کرد. ابتدا از HTML5 استفاده می کنیم شکل عنصر همراه با الف شرح شکل داخل آن را تگ کنید ما همچنین استفاده خواهیم کرد نسخه ی نمایشی-3 کلاس برای لیست نامرتب ما:

<ul class="demo-3">
 <li>
 <figure>
 <img src="https://www.webdesignerdepot.com/2015/02/3-cool-css3-image-hover-effects/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

در CSS خود، تصویر شکل را روی a قرار می دهیم نسبت فامیلی موقعیت و سپس پنهان کنید نمای پشت صورت. ما همچنین استفاده خواهیم کرد rotateY تبدیل: -180 درجه برای Figcaption و سپس آن را به 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)
}