دمو/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

The post ساخت هاور متحرک با css appeared first on وب دیزاین.

دمو/DEMO

کد HTML به این صورت هست

<div class="col-md-12 col-sm-12 col-xs-12 gallery_panel_bricks_js">
    <div class="panel_gollary panel_gollary_default">
        <div class="panel_contect">
            <div class="rotation_3d">
                <div class="gallery_front">
                    <img src="assets/img/galery4.png" alt="" width="100%" class="pic_gollery">
                    <aside class="text_gallery_front"><i class="fa  fa-play-circle"></i>
                        <p class="">مشاهده </p>
                    </aside>
                </div>

                <div class="gallery_back text_center">
                    <div class="back">
                        <span class="cover"></span>
                        <img src="assets/img/galery4.png" alt="" width="100%" class="pic_gollery">
                        <aside class="text_gollery_back">
                            <h3> نمونه</h3>
                            <p>نمونه </p>
                            <i class="fa fa-search-plus"></i>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

کلاس front برای نمایش عکس اصلی و ثابت سایت می باشد و کلاس back برای عکس پشت زمینه می‌باشد که از دید کاربر مخفی می‌باشد تا زمانی که ماوس بر روی عکس قرار گیرد. در عکس پشت کلاس cover داریم برای رنگ روی عکس قرارگرفته، text_gollery_back کلاس برای متن هست که در پشت زمینه قرار دارد.

کلاس front رو به شکل زیر استایل می‌دهیم و     ;transform: rotateX(0deg) ظاهر عکس اصلی بدون چرخش قرار می‌دهیم اما در هاور عکس فرق دارد درجه چرخش عکس؛

.gallery_panel_bricks_js .panel_contect .gallery_front {
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    transform: rotateX(0deg);
    transform-style: preserve-3d;
    transition: all 1.5s ease 0s;
    width: 100%;
    z-index: 1;
}

هاور عکس روبه‌رو به این شکل استایل می‌دهیم:

.gallery_panel_bricks_js .panel_contect .rotation_3d:hover .gallery_front {
  position: absolute;
  transform: rotateX(-180deg);
}

عکس پس‌زمینه را به این صورت استایل می‌دهیم؛  ;transform: rotateX(180deg) و به این صورت  استایل می‌دهیم اما مقدار هاور فرق دارد؛

.gallery_panel_bricks_js .panel_contect .gallery_back {
  backface-visibility: hidden;
  color: #333;
  height: 100%;
  position: absolute;
  transform: rotateX(180deg);
  transform-style: preserve-3d;
  transition: all 1.5s ease 0s;
  width: 100%;
  z-index: 0;
}

هاور عکس  پشت زمینه به این شکل استایل می‌دهیم:

.gallery_panel_bricks_js .panel_contect .rotation_3d:hover .gallery_back {
  transform: rotateX(0deg);
}

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

.gallery_panel_bricks_js .panel_contect .gallery_back .back .text_gollery_back {
  bottom: 0;
  left: 0;
  margin: auto;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 6%;
  transform: translateZ(60px);
  z-index: 6;
}

دمو/DEMO

The post ساخت هاور زیبایی سه‌بعدی برای عکس‌های خود appeared first on وب دیزاین.