Как прописать живой баннер html ? 2.X

 
Посетитель
small user social cms
Медаль
Сообщений: 886
Здравствуйте. Облазил все форумы и поисковики и так и не нашел точного решения.
Вопрос наверное стандартный, но для меня очень важен...

Ставлю баннеры - кнопки на сайте, во пример http://postavy.info/pages/o-gorode-postavy-i-krae.html (две кнопки "Что посмотреть." верхняя прописана хтмл кодом нижняя в картинкой с ссылкой).

Когда на любой из баннеров наводишь курсор мышки -стрелочку, она меняется на курсор руку.

А хотелось бы что бы было вот как здесь на примере: http://braslaw.by/ наводишь курсор и сам баннер меняет как бы цвет, темнеет, тоесть визуально это красиво и как кнопка.

Я прописываю код html:
Код PHP:
  1. <a href="http://postavy.info/" target=_blank><img src="http://postavy.info/upload/000/u1/072/c9922c9b.png" width=255 height=88 alt="Что по смотреть?" border=0></a>

Подскажите пожалуйста варианты, как можно сделать именно html кодом так что бы баннер имел кнопочный красивый вид, с не большим затемнением.

Благодарю.
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1897
Забейте в поисковик "Hover Effect", "ховер-эффект" тд. и получите 100500 решений.
Редактировалось: 1 раз (Последний: 28 января 2017 в 20:59)
Контент для ваших проектов. Копирайт всех видов от профессионалов. Создание и продвижение сайтов, реклама.
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 886
garry:

Забейте в поисковик "Hover Effect", "ховер-эффект" тд. и получите 100500 решений.

Благодарю, ТОЛЬКО НЕ ПОНЯТНО ГДЕ СОЗДАВАТЬ КЛАСС И КАК....



Создаем класс для всех изображений

Изображение должны обязательно принадлежать классу pic. Он содержит информацию об расположении блока с изображением - float; о высоте и ширине блока - height и width; тип отображение, если изображении больше, чем размер блока - overflow, а также информацию об рамке - border, тени - box-shadow и отступе - margin. Полный CSS класса pic будет выглядеть так:

.pic {
border: 10px solid #fff;
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;

-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1897
Как вариант:
Код PHP:
  1. <a href="http://postavy.info/" target=_blank><img src="http://postavy.info/upload/000/u1/072/c9922c9b.png" class="pic" width=255 height=88 alt="Что по смотреть?" border=0></a>
Контент для ваших проектов. Копирайт всех видов от профессионалов. Создание и продвижение сайтов, реклама.
Посетитель
small user social cms
Медаль
Сообщений: 886
garry:

Как вариант:
Код PHP:
  1.  

Получился обычный баннер без эффекта...
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1897
А вы в стили свои добавили сам хувер для pic?
Контент для ваших проектов. Копирайт всех видов от профессионалов. Создание и продвижение сайтов, реклама.
Посетитель
small user social cms
Медаль
Сообщений: 886
garry:

А вы в стили свои добавили сам хувер для pic?

В том то и дело, что я не понял как именно и куда добавлять стили... и какие именно...
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1897
Судя по вашей теме установленной на сайте, то сюда http://postavy.info/templates/oneminima/sass/vendors/bootstrap/_reboot.scss
Но у вас используется формат .scss и скорее всего на вашем компе не стоит ничего, что смогло бы вам помочь сделать это.
По этому вам стоит поискать любой онлайн компилятор .scss, вставить туда нужные вам стили и уже скомпилированный добавить в выше написанный ваш файл.

И кстати у вас на странице что ссылку дали, куча ошибок в консоле показывает, исправьте.
Как прописать живой баннер html ?
Редактировалось: 1 раз (Последний: 29 января 2017 в 10:03)
Контент для ваших проектов. Копирайт всех видов от профессионалов. Создание и продвижение сайтов, реклама.
Посетитель
small user social cms
Медаль
Сообщений: 886
garry:

Судя по вашей теме установленной на сайте, то сюда http://postavy.info/templates/oneminima/sass/vendors/bootstrap/_reboot.scss
Но у вас используется формат .scss и скорее всего на вашем компе не стоит ничего, что смогло бы вам помочь сделать это.
По этому вам стоит поискать любой онлайн компилятор .scss, вставить туда нужные вам стили и уже скомпилированный добавить в выше написанный ваш файл.

И кстати у вас на странице что ссылку дали, куча ошибок в консоле показывает, исправьте.
Как прописать живой баннер html ?


Тоесть потом вставить просто хтмл блоком на сайт и будет работать?
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1897
@Aliaksandr:
Тоесть потом вставить просто хтмл блоком на сайт и будет работать?
1. Прописать стили в ваш файл стилей, как выше написал
2. Вставить как вы выразились блок и будет работать. С прописанным классом у картинки.
Контент для ваших проектов. Копирайт всех видов от профессионалов. Создание и продвижение сайтов, реклама.
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
@Aliaksandr:
В том то и дело, что я не понял как именно и куда добавлять стили... и какие именно...

Вставьте сразу после кода баннера (стили для примера, при наведении появляется тень):

Код HTML:
  1.  
  2. <style type="text/css"> img.pic:hover {-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);} </style>
  3.  
Это не по феншую, но зато быстро и понятно)
Дальше думаю разберетесь...
Редактировалось: 1 раз (Последний: 29 января 2017 в 10:38)
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
@Aliaksandr:
А хотелось бы что бы было вот как здесь

Точно как там:

Код PHP:
  1.  
  2. <div class="pichover"><a href="http://postavy.info/"></a></div>
  3.  
  4. <style type="text/css">
  5. .pichover {
  6. background: rgba(0, 0, 0, 0) url(http://postavy.info/upload/000/u1/072/c9922c9b.png) 10% 50% no-repeat;
  7. width: 255px;
  8. height: 88px;
  9. }
  10.  
  11. .pichover a {
  12. width: 255px;
  13. height: 88px;
  14. display: block;
  15. }
  16.  
  17. .pichover a:hover {
  18. background: rgba(0, 0, 0, 0) linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent) repeat scroll 0 0;
  19. }
  20. </style>
  21.  
Редактировалось: 2 раз (Последний: 29 января 2017 в 11:37)
Посетитель
small user social cms
Медаль
Сообщений: 886
reload:

@Aliaksandr:
В том то и дело, что я не понял как именно и куда добавлять стили... и какие именно...

Вставьте сразу после кода баннера (стили для примера, при наведении появляется тень):

Код HTML:
  1.  
  2. img.pic:hover {-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);}
  3.  
Это не по феншую, но зато быстро и понятно)
Дальше думаю разберетесь...


Вставил, не появилась тень при наведении..
Код PHP:
  1. <a href="http://postavy.info/" target=_blank><img src="http://postavy.info/upload/000/u1/072/c9922c9b.png" width=255 height=88 alt="Что по смотреть?" border=0></a>
  2. <style type="text/css"> img.pic:hover {-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);} </style>
Как прописать живой баннер html ?
Посетитель
small user social cms
Медаль
Сообщений: 886
reload:

@Aliaksandr:
А хотелось бы что бы было вот как здесь

Точно как там:

Код PHP:
  1.  
  2.  
  3.  
  4.  
  5. .pichover {
  6. background: rgba(0, 0, 0, 0) url(http://postavy.info/upload/000/u1/072/c9922c9b.png) 10% 50% no-repeat;
  7. width: 255px;
  8. height: 88px;
  9. }
  10.  
  11. .pichover a {
  12. width: 255px;
  13. height: 88px;
  14. display: block;
  15. }
  16.  
  17. .pichover a:hover {
  18. background: rgba(0, 0, 0, 0) linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent) repeat scroll 0 0;
  19. }
  20.  
  21.  

Я не понимаю где это править...(
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
@Aliaksandr:
Я не понимаю где это править...(

Вставлять в "Содержимое HTML блока", туда от куда скрин делали:

Как прописать живой баннер html ?



@Aliaksandr:
Вставил, не появилась тень при наведении..

Не появляется, потому что вы уже внесли изменения, убрали class)

Будет работать если добавите этот class:

Код PHP:
  1.  
  2. <img src="http://postavy.info/upload/000/u1/072/c9922c9b.png" width="255" height="88" alt="Что по смотреть?" class="pic" border="0">
  3.  
  4. <style type="text/css"> img.pic:hover {-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);} </style>
  5.  
Редактировалось: 1 раз (Последний: 30 января 2017 в 18:56)
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: