Страница 1 из 11
Форум » uCoz » Помощь по uCoz » Помошь с эфектом при наведении на картинку
Помошь с эфектом при наведении на картинку
waak Offline
Проверенный
41
Дата: Вторник, 18.08.2015, 14:37 | Сообщение # 1
Помогите сделать такой эфект при наведении на картинку как на этом сайте http://gabestore.ru/

Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт
Профиль
kefir Offline
Проверенный
6
Дата: Вторник, 18.08.2015, 14:42 | Сообщение # 2
Код

  <div class="status">
               <div class="statusTitle">Испытай удачу</div>
               <ul class="statusList">
                 
                <li class="gold">
                          <a href="https://www.oplata.info/asp/pay_wm.asp?id_d=1801938" class="statusLink"><!-- &agent=330159 --></a>
                          <div class="picCont">
                           <div class="front face">
                    <img src="//img.gabestore.ru/template/images/gold.png" alt="">
                    </div>
                           <div class="back face center">
                    <img src="//img.gabestore.ru/template/images/item.png" alt="">
                    <div class="titlePrice">Купить<br>45 руб</div>
                    </div>
                          </div>
                </li>
                <li class="platinum">
                          <a href="https://www.oplata.info/asp/pay_wm.asp?id_d=1801941" class="statusLink"><!-- &agent=330159 --></a>
                          <div class="picCont">
                           <div class="front face">
                    <img src="//img.gabestore.ru/template/images/platinum.png" alt="">
                    </div>
                           <div class="back face center">
                    <img src="//img.gabestore.ru/template/images/item.png" alt="">
                    <div class="titlePrice">Купить<br>60 руб</div>
                    </div>
                          </div>
                </li>
                <li class="premium">
                          <a href="https://www.oplata.info/asp/pay_wm.asp?id_d=1758376" class="statusLink"><!-- link --></a>
                          <div class="picCont">
                           <div class="front face">
                    <img src="//img.gabestore.ru/template/images/premium.png" alt="">
                    </div>
                           <div class="back face center">
                    <img src="//img.gabestore.ru/template/images/item.png" alt="">
                    <div class="titlePrice">Купить<br>100 руб</div>
                    </div>
                          </div>
                </li>
       <li class="silver">
                          <a href="https://www.oplata.info/asp/pay_wm.asp?id_d=1923022" class="statusLink"><!-- &agent=330159 --></a>
                          <div class="picCont">
                           <div class="front face">
                    <img src="//img.gabestore.ru/template/images/vip.png" alt="">
                    </div>
                           <div class="back face center">
                    <img src="//img.gabestore.ru/template/images/item.png" alt="">
                    <div class="titlePrice">Купить<br>300 руб</div>
                    </div>
                          </div>
                </li>
               </ul>
                     <div class="statusInfo">
                      <div class="statusText" style="display:block">Наведите курсор на товар, <br>чтобы получить информацию о нём.</div>                     
                      <div class="statusSilver">Покупая <strong>VIP</strong> ключ, Вы <strong>гарантированно</strong> получаете игры стоимостью от 300 до 2000 рублей, среди которых GTA 5, The Witcher 3, Project CARS, Mortal Kombat X, Dying Light, Call of Duty: Advanced Warfare, Borderlands The Pre-Sequel, Total War: ATTILA, Middle-earth: Shadow of Mordor, Civilization: Beyond Earth.</div>
                      <div class="statusGold" style="margin-top: 20px;">Покупая <strong>Gold</strong> ключ, вы получаете случайную игру стоимость до 300 рублей.</div>
                      <div class="statusPlatinum" style="margin-top: 20px;">Покупая <strong>Platinum</strong> ключ, вы получаете игру стоимостью до 500 рублей.</div>
                      <div class="statusPremium">Покупка <strong>Premium</strong> ключа даёт <strong>Вам 50% шанс</strong> получить одну из этих игр: Mortal Kombat X, Evolve, Dying Light, Far Cry 4, Call of Duty: Advanced Warfare, Farming Simulator 15, Metro Redux, COD: Black Ops 2, CS:GO, Portal 2, CS:Source, Saints Row: Gat out of Hel, Deus Ex: Human Revolution.</div>
                     </div>
              </div>
                  
                 <nav>
                  <ul>


Код

.statusList li {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}
.statusList li .picCont {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
      
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.statusList li:hover .picCont{
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility:hidden;
    backface-visibility: hidden; z-index:1
}
.face.back {
    display: block;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-sizing: border-box;
    padding: 10px;
    color: white;
    text-align: center; z-index:2
}





Сообщение отредактировал kefir - Вторник, 18.08.2015, 14:46
Профиль
waak Offline
Проверенный
41
Дата: Вторник, 18.08.2015, 14:57 | Сообщение # 3
Спасибо! но не могли бы вы дать код только эфект картинки чтоб менялась она и всё без всего остольного

Добавлено (18.08.2015, 14:57)
---------------------------------------------
Мне нужно так чтоб при наведении на картинку что стоит у меня был такой эфект


Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт
Профиль
admin Offline
Гл. администратор
429
Дата: Вторник, 18.08.2015, 15:05 | Сообщение # 4
http://davidwalsh.name/css-flip

Помог? Ставь или поддержи проект.
Профиль
waak Offline
Проверенный
41
Дата: Вторник, 18.08.2015, 17:01 | Сообщение # 5
админ Спасибо! это то что нужно

Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт
Профиль
Форум » uCoz » Помощь по uCoz » Помошь с эфектом при наведении на картинку
Страница 1 из 11
Поиск: