Изображение материала при наведении на ссылку

Изображение материала при наведении на ссылку

03.07.201523334

Ссылки сами по себе скучная и непривлекательная штука, согласитесь? А бывает так, что нам нужно что-бы пользователь заинтересовался и перешел по ней. По этому, нам нужно как-то приукрасить привычное понимание ссылок. И сегодня мы сделаем это с помощью вывода изображения, которое будет появляться при наведении на ссылку.

Данный скрипт работает на чистом CSS, и никаких танцев с бубном при настройке не требует. По этому проблем возникнуть не должно.

И так, приступаем к установке.

Первым делом мы добавляем стили в "Таблицу стилей (CSS)":
Код
  .thumbnail{  
  position: relative;  
  z-index: 50;  
  }  
  .thumbnail:hover{  
  background-color: transparent;  
  z-index: 150;  
  }  
  .thumbnail span{  
  position: absolute;  
  background-color: #0064af;  
  padding: 2px;  
  left: 10px;  
  border: 0px solid white;  
  visibility: hidden;  
  color: Yellow;  
  text-decoration: none;  
  border-radius: 0px 0px 0px 0px;  
  -moz-border-radius: 0px 0px 0px 0px;  
  -webkit-border-radius: 0px 0px 0px 0px;  
  }  
  .thumbnail span img{  
  border-width: 0;  
  padding: 2px;  
  }  
  .thumbnail:hover span{  
  visibility: visible;  
  top: 0;  
  left: 15px;  
  }
Следующее, что мы добавляем - наша ссылка:
Код
<a class="thumbnail" href="$ENTRY_URL$">$TITLE$<span><img src="$IMG_URL1$" height ="200" width="500"/></span></a>
Вот и все, скрипт установлен.

Данное решения является очень удобным, так, как работает без использовании JavaScrip, что тем самым снижает нагрузку на сайт. Настройка внешнего отображения всплывающей картинки осуществляется в таблице стилей.

Советую использовать этот скрипт в текстовых информерах популярных новостей и материалов, где при наведении на сам материал, будет показываться его изображение. Но я думаю вы и сами найдете ему применение.




Сохраните в социальную сеть
Комментарии (4)
Демо бы прикрутили
4
Deniss Lvov 16.08.2015 в 05:01Спам
Зачем демо? когда и так всем понятно как он работает
0
Crudus 05.07.2015 в 15:45Спам
благодаря это скрипт я создал себе вид материала для фильмы :):):):)
Спасибо тебе автор!!!
0
Deniss Lvov 16.08.2015 в 05:00Спам
Нашел ему применение!
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт