|
"Play" при наведении
|
|
Дата: Вторник, 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>
Играть в Spin Tires можно двумя способами: с модам и без них - spintiresmods.ru
|
Дата: Вторник, 2016-02-02, 19:23 | Сообщение # 2В чем проблема добавить js ?
Код $('#test').hover(function () {
//// Ваши действия
}, function() {
//// Отмена действий
});
Напишем сайт, скрипт - любой тематики и сложности, в макс. быстрые сроки!.. Предоставляем SEO услуги для продвижения групп и сайтов!. За подробностями обращайтесь по Контактам: vk.com/frilanser | Skype: spammrac ...
|
Дата: Вторник, 2016-02-02, 19:26 | Сообщение # 3Цитата Frilanser (  ) В чем проблема добавить js ?
Проблема в незнании, подробнее можно?
Играть в Spin Tires можно двумя способами: с модам и без них - spintiresmods.ru
|
Дата: Вторник, 2016-02-02, 21:08 | Сообщение # 4
|
Дата: Среда, 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
|
Дата: Среда, 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>
|
Дата: Среда, 2016-02-03, 13:24 | Сообщение # 7admin, Вовчик, jpios Спасибо! 
Играть в Spin Tires можно двумя способами: с модам и без них - spintiresmods.ru
|
Дата: Четверг, 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:)
|
Дата: Четверг, 2016-02-04, 23:55 | Сообщение # 9Цитата Вовчик ( ) почему нельзя написать помогло или нет, что это за отношение тем более от группы администратор!?
Цитата Kaizzer ( ) admin, Вовчик, jpios Спасибо!
Если я написал "Спасибо!", наверное значит что всё помогло. Не так ли?
Играть в Spin Tires можно двумя способами: с модам и без них - spintiresmods.ru
|
Дата: Пятница, 2016-02-05, 01:18 | Сообщение # 10ну лан 
p.s. ты же потом просил прикрутить к твоему виду, я так сделал но не проверял, может что-то не правильно...
гуляю на Webo4ka.Ru:)
|
Дата: Пятница, 2016-02-05, 01:23 | Сообщение # 11Цитата Вовчик ( ) p.s. ты же потом просил прикрутить к твоему виду, я так сделал но не проверял, может что-то не правильно...
А, блино, точно. С этим видом нужно отдельно переписываться, как нибудь напишу, спасибо
Играть в Spin Tires можно двумя способами: с модам и без них - spintiresmods.ru
|
или 
