ساخت هاور متحرک با css

۲۲ امتیاز

Loading…

با یکسری خلاقیت و آشنایی با کدهای css می‌توان هاور های زیبایی برای عکس و مطالب خود بسازید، در حال حاضر ما می‌خواهیم یک هاور زیبای متحرک برای عکس خود بسازیم:

دمو/DEMO

اولین قدم:

در بین تگ <a></a> عکس و متن خود را می‌گذاریم البته در دو قسمت مجزا. من در بین تگ div عکس و متن گذاشتم.

<a href="#">
    <div class="img"><img src="1.png" alt="img"></div>
    <div class="info">
        <div class="info-back">
            <p class="name">متن تستی</p>
        </div>
    </div>
</a> 

دومین قدم:

حالا اجزای موردنیاز رو گذاشتیم حالا نوبت این رسیده ازنظر ظاهری تغییرات ایجاد کنیم و استایل بدیم (استایل که خودتان دوست دارید بگذارید.)

.img {
     border-radius: 50%;
     height: 220px;
    overflow: hidden;
     position: relative;
    width: 220px;
 }

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

.info {
     backface-visibility: hidden;
     border-radius: 50%;
     bottom: 0;
     left: 0;
     position: absolute;
     right: 0;
     text-align: center;
     top: 0;
 }
.info .info-back {
     backface-visibility: hidden;
     background: #333 none repeat scroll 0 0;
     border-radius: 50%;
     height: 100%;
     opacity: 1;
     visibility: hidden;
     width: 100%;
     position: relative;
 }

این هم از استایل های متن که در پشت زمینه عکس ما قرارگرفته البته با دستور visibility: hidden; قابل‌رؤیت نیست فعلاً.

سومین قدم:

حالا باید با دستور transform و سایر دستورات transform ها هاور و حرکت‌های دلخواه به‌عکس و متن خود بدهیم. قرار هست وقتی ماوس بر روی عکس قرار می‌گیرد عکس مخفی و نوشته نمایان شود پس هاور باید بر روی تگ <a></a> قرار بگیرد. می‌خواهیم این هاور را به‌صورت خط به خط جلو بریم که متوجه هر خط کدمان به چه هدفی استفاده‌شده.

• اولین حرکت برای هاور باید عکس مخفی باشد و نوشته نمایان شود:

a:hover .img {
     opacity: 0;
 }
  
a:hover .info .info-back {
     opacity: 1;
     visibility: visible;
 }

• حالا باید حرکت داشته باشد تا هاور جالبی از آب دربیاید پس زمانی که عکس مخفی باشد باید چنین خط کدی رو وارد کنیم:

.img {
     transform-origin: 50% 0 0;
     transition: all 0.35s linear 0s;
 }

با استفاده از خصوصیت transform-origin می‌توان مکان عنصر تبدیل‌شده را تغییر داد. عناصر تبدیل‌شده دوبعدی می‌توانند در جهت محور x ها و محور y ها حرکت کنند. اما عناصر تبدیل‌شده سه‌بعدی می‌توانند در جهت محور z ها نیز حرکت می‌کنند.

a:hover .img {
     transform: translate3d(0px, 280px, 0px) rotate3d(1, 0, 0, -90deg);
 }

با خط کد ه ای بالا برای هاور تعیین می‌کنیم که درحرکت سه‌بعدی چه مقدار و چند درجه چرخش داشته باشد .

• نوبت متن و زمینه متن رسیده با یک حرکت ساده چرخش از بالا به پایین نمایان شود:

 .info {
     transform-style: preserve-3d;
 }

.info .info-back {
     transform-origin: 50% 0 0;
     transition: all 0.35s linear 0s;
 }
 
 a:hover .info .info-back {
     transform: rotate3d(1, 0, 0, 0deg);
 }
 
 
 .info .info-back {
     transform: translate3d(0px, 0px, -220px) rotate3d(1, 0, 0, 90deg);
 }

شما می‌توانید حرکت‌ها رو از پایین به بالا یا برعکس و یا از چپ به راست و یا برعکس تغیر بدهید فقط کافی هست مقدار transform هارو تغییر دهید.

دمو/DEMO