Модератор форума: dotbot |
Сообщество uCoz Архивариус Корзина Скрипт между </figcaption></figcaption> (Как вставить скрипт между </figcaption></figcaption>) |
Скрипт между </figcaption></figcaption> |
Приветствую форумчане. Как вставить скрипт между figcaption не подскажите.
К примеру. Изображение переворачивается и на задней стороне банер. Вот код: Код<ul class="demo-3"> <li> <figure> <img src="Ссылка на картинку" alt=""/> <figcaption> <h2>Заголовок</h2> <p>КАК ВСТАВИТЬ СЮДА СКРИПТ</p> </figcaption> </figure> </li> </ul> |
Вот ссылка на страницу: http://rubarub.ru/blog....-25-59#
Там 2-я картинка, при наведении курсора разворачивается и написано "Если не видно картинку, увеличить и т.д.", ниже этого текста нужно вставить ротатор банеров. Как в этот код вставить ротатор банеров на обратной стороне картинки? Вот сам код: Код <ul class="demo-3"> <li> <figure> <img src="Ссылка на картинку" alt=""/> <figcaption> <h2>Заголовок</h2> <p>Описание</p> </figcaption> </figure> </li> </ul> |
Вот CSS
Код .demo-3 { position:relative; width:70%; overflow:hidden; float:center; margin-right:20px } .demo-3 figure { margin:0; padding:0; position:relative; cursor:pointer; margin-left:0px } .demo-3 figure img { display:block; position:relative; z-index:10; margin:-15px 0 } .demo-3 figure figcaption { display:block; position:absolute; z-index:5; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } .demo-3 figure h2 { font-family:'Lato'; color:#fff; font-size:20px; text-align:center } .demo-3 figure p { display:block; font-family:'Lato'; font-size:12px; line-height:18px; margin:0; color:#fff; text-align:center } .demo-3 figure figcaption { top:0; left:0; width:100%; height:100%; padding:29px 44px; background-color:rgba(26,76,110,0.5); text-align:center; backface-visibility:hidden; -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg); transform:rotateY(-180deg); -webkit-transition:all .5s; -moz-transition:all .5s; transition:all .5s } .demo-3 figure img { backface-visibility:hidden; -webkit-transition:all .5s; -moz-transition:all .5s; transition:all .5s } .demo-3 figure:hover img,figure.hover img { -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); transform:rotateY(180deg) } .demo-3 figure:hover figcaption,figure.hover figcaption { -webkit-transform:rotateY(0); -moz-transform:rotateY(0); transform:rotateY(0) } А вот установленный код на странице Код <ul class="demo-3"> <li> <figure> <a href="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg"><img src="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg" style="width: 100%; alt=""/> </a> <figcaption> <h2><a href="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg">Невидно картинку?<br> Нажми<br><br>УВЕЛИЧИТЬ<img class="top" src="http://rubarub.ru/BLOG/Clip2net_160129012203.jpg" style="width: 100%; alt=""/></a></h2> <p></p> </figcaption> </figure> </li> </ul> Добавлено (27 Фев 2016, 13:41:55) |
Извиняюсь за долгий ответ, нет тормозит. А где сам код баннера?
.demo-3 { position:relative; width:70%; overflow:hidden; float:center; margin-right:20px } .demo-3 figure { margin:0; padding:0; position:relative; cursor:pointer; margin-left:0px } .demo-3 figure img { display:block; position:relative; z-index:10; margin:-15px 0 } .demo-3 figure figcaption { display:block; position:absolute; z-index:5; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } .demo-3 figure h2 { font-family:'Lato'; color:#fff; font-size:20px; text-align:center } .demo-3 figure p { display:block; font-family:'Lato'; font-size:12px; line-height:18px; margin:0; color:#fff; text-align:center } .demo-3 figure figcaption { top:0; left:0; width:100%; height:100%; padding:29px 44px; background-color:rgba(26,76,110,0.5); text-align:center; backface-visibility:visible; -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg); transform:rotateY(-180deg); -webkit-transition:all .5s; -moz-transition:all .5s; transition:all .5s } .demo-3 figure img { backface-visibility:hidden; -webkit-transition:all .5s; -moz-transition:all .5s; transition:all .5s } .demo-3 figure:hover img,figure.hover img { -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); transform:rotateY(180deg) } .demo-3 figure:hover figcaption,figure.hover figcaption { -webkit-transform:rotateY(0); -moz-transform:rotateY(0); transform:rotateY(0) } hidden - это элемент будет невидимым, а visible будет отображать элемент как выдимый. Сообщение отредактировал SkyFfs - Суббота, 27 Фев 2016, 13:53:56
|
Он сюда почему то так вставляется
<script type="text/javascript" src="http://rubarub.ru/rtr/2"></script> А выглядит так Добавлено (27 Фев 2016, 13:54:16) Добавлено (27 Фев 2016, 13:59:29) Добавлено (27 Фев 2016, 14:03:09) |
Сейчас гляну.
Добавлено (27 Фев 2016, 14:31:23) |
У меня вот: http://rubarub.ru/blog....2-25-59
|
| |||