• Страница 1 из 1
  • 1
"Play" при наведении
Kaizzer Оффлайн
Проверенный
41
Дата: Вторник, 2016-02-02, 18:37 | Сообщение # 1
Ребят, помогите сделать при наведении на картинку (#IMG_URL1#), ховер эффект затемнения + появление иконки "Play" по центру.

Код:
Код
<style>
.mtr {padding:40px;display:table}
.mtr .im {background:#FFFFFF;padding-right:1px;display:table-cell;vertical-align:top}
.mtr_td {display:table-cell;vertical-align:top}
.mtr .inim {width:100%;height:100%;overflow:hidden}
    
.title {padding:2px;margin-bottom:0px;font-size:16px;color:#666;}
.title a {color:#f2f2f2;}

    
</style>
<div style="width:50%;float:left;">  
    
<div class="mtr">
<div class="im">
<div class="inim">
<a href="$ENTRY_URL$"><img src="<?if($IMG_SMALL_URL1$)?>$IMG_URL1$<?else?>$IMG_URL1$<?endif?>" width="400" alt="$TITLE$" title="$TITLE$" /><a href="$ENTRY_URL$"><div class="title">$TITLE$</div></a></a>
</div>
</div>
</div>

</div>


Прикрепления: 1960642.png (121.6 Kb)


Играть в Spin Tires можно двумя способами: с модам и без них - spintiresmods.ru
Профиль
Frilanser Оффлайн
Проверенный
2
Дата: Вторник, 2016-02-02, 19:23 | Сообщение # 2
В чем проблема добавить js ?
Код
$('#test').hover(function () {
   //// Ваши действия
}, function() {
//// Отмена действий
});


Напишем сайт, скрипт - любой тематики и сложности, в макс. быстрые сроки!.. Предоставляем SEO услуги для продвижения групп и сайтов!. За подробностями обращайтесь по Контактам: vk.com/frilanser | Skype: spammrac ...
Профиль
Kaizzer Оффлайн
Проверенный
41
Дата: Вторник, 2016-02-02, 19:26 | Сообщение # 3
Цитата Frilanser ()
В чем проблема добавить js ?

Проблема в незнании, подробнее можно?


Играть в Spin Tires можно двумя способами: с модам и без них - spintiresmods.ru
Профиль
admin Оффлайн
Проверенный
429
Дата: Вторник, 2016-02-02, 21:08 | Сообщение # 4
http://yraaa.ru/publ/1/3-1-0-895

Помог? Ставь или поддержи проект.
Профиль
Вовчик Оффлайн
Проверенный
26
Дата: Среда, 2016-02-03, 00:49 | Сообщение # 5
нафига вообще картинки, если это все на css можно сделать
Код

<div id="krug"><span id="play"></span></div>

<style>
#krug {background:#ff0000; border-radius:100%; width:400px; height:400px; cursor:pointer; position:relative;}
#krug:hover {background:rgba(255,0,0,0.8);}
#play {border:80px solid transparent; border-left: 110px solid #fff; display:block; position:absolute; top:130px; left:170px; display:none;}
#krug:hover #play {display:block;}
</style>


гуляю на Webo4ka.Ru:)


Сообщение отредактировал Вовчик - Среда, 2016-02-03, 00:49
Профиль
jpios Оффлайн
Проверенный
7
Дата: Среда, 2016-02-03, 00:54 | Сообщение # 6
я бы делал без js, примерно вот так:
Код
<style>
.mtr {padding:40px;display:table}
.mtr .im {background:#FFFFFF;padding-right:1px;display:table-cell;vertical-align:top}
.mtr_td {display:table-cell;vertical-align:top}
.mtr .inim {width:400px;height:250px;overflow:hidden}
    
.title {padding:2px;margin-bottom:0px;font-size:16px;color:#666;}
.title a {color:#f2f2f2;}
    
.inim ul {list-style:none; padding:0;width: 100%;height: 100%;position: relative}
.inim ul .play-btn {
    position: absolute;
    background: rgba(0, 0, 0, 0.5) url(http://www.clipartbest.com/cliparts/Mdi/7gq/Mdi7gq5c9.png) 50% 50% no-repeat;
    background-size: 110px;
    width: 100%;
    height: 100%;
    vertical-align: bottom;
    text-align: inherit;
    opacity:0;}

    .inim ul li:hover .play-btn {
    opacity:1;
    transition: all .8s ease-in-out 0.1s;
    }

    
</style>
<div style="width:50%;float:left;">  
    
<div class="mtr">
<div class="im">
<div class="inim">
     <ul><li>
    <a href="$ENTRY_URL$"> <div class="play-btn"></div></a>
  <img src="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>" width="400" height="250" alt="$TITLE$" title="$TITLE$" /></li></ul>
<a href="$ENTRY_URL$"><div class="title">$TITLE$</div></a>
</div>
</div>
</div>

</div>


Профиль
Kaizzer Оффлайн
Проверенный
41
Дата: Среда, 2016-02-03, 13:24 | Сообщение # 7
admin, Вовчик, jpios Спасибо! :)

Играть в Spin Tires можно двумя способами: с модам и без них - spintiresmods.ru
Профиль
Вовчик Оффлайн
Проверенный
26
Дата: Четверг, 2016-02-04, 22:43 | Сообщение # 8
Код
<style>
.mtr {padding:40px;display:table}
.mtr .im {background:#FFFFFF;padding-right:1px;display:table-cell;vertical-align:top}
.mtr_td {display:table-cell;vertical-align:top}
.mtr .inim {width:100%;height:100%;overflow:hidden}
    
.title {padding:2px;margin-bottom:0px;font-size:16px;color:#666;}
.title a {color:#f2f2f2;}

.inim {position:relative;}
#krug {background:#ff0000; border-radius:100%; width:400px; height:400px; cursor:pointer;position:absolute; top:0px; left:0px; z-index:2; display:none;}
#play {border:80px solid transparent; border-left: 110px solid #fff; display:block; position:absolute; top:130px; left:170px;}
#fon {background:#000; opacity:0.5; width:400px; height:400px; position:absolute; top:0px; left:0px; z-index:1; display:none;}
.inim:hover #fon {display:block;}
.inim:hover  #krug {display:block;}
</style>
<div style="width:50%;float:left;">  
    
<div class="mtr">
<div class="im">
<div class="inim">
<div id="krug"><span id="play"></span></div><div id="fon"></div>
<a href="$ENTRY_URL$"><img src="<?if($IMG_SMALL_URL1$)?>$IMG_URL1$<?else?>$IMG_URL1$<?endif?>" width="400" alt="$TITLE$" title="$TITLE$" /><a href="$ENTRY_URL$"><div class="title">$TITLE$</div></a></a>
</div>
</div>
</div>

</div>

Добавлено (04.02.2016, 22:43)
---------------------------------------------
почему нельзя написать помогло или нет, что это за отношение тем более от группы администратор!?


гуляю на Webo4ka.Ru:)
Профиль
Kaizzer Оффлайн
Проверенный
41
Дата: Четверг, 2016-02-04, 23:55 | Сообщение # 9
Цитата Вовчик ()
почему нельзя написать помогло или нет, что это за отношение тем более от группы администратор!?


Цитата Kaizzer ()
admin, Вовчик, jpios Спасибо!


Если я написал "Спасибо!", наверное значит что всё помогло. Не так ли?


Играть в Spin Tires можно двумя способами: с модам и без них - spintiresmods.ru
Профиль
Вовчик Оффлайн
Проверенный
26
Дата: Пятница, 2016-02-05, 01:18 | Сообщение # 10
ну лан ;)
p.s. ты же потом просил прикрутить к твоему виду, я так сделал но не проверял, может что-то не правильно...


гуляю на Webo4ka.Ru:)
Профиль
Kaizzer Оффлайн
Проверенный
41
Дата: Пятница, 2016-02-05, 01:23 | Сообщение # 11
Цитата Вовчик ()
p.s. ты же потом просил прикрутить к твоему виду, я так сделал но не проверял, может что-то не правильно...


А, блино, точно. С этим видом нужно отдельно переписываться, как нибудь напишу, спасибо ;)


Играть в Spin Tires можно двумя способами: с модам и без них - spintiresmods.ru
Профиль
  • Страница 1 из 1
  • 1
Поиск: