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

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

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

Данный скрипт работает на чистом 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, что тем самым снижает нагрузку на сайт. Настройка внешнего отображения всплывающей картинки осуществляется в таблице стилей.

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


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (4)
Мефодий Буслаев 2015-07-04 в 11:32 / МатериалСпам
Демо бы прикрутили
4
Crudus 2015-07-05 в 15:45 / МатериалСпам
благодаря это скрипт я создал себе вид материала для фильмы :):):):)
Спасибо тебе автор!!!
-1
Deniss Lvov 2015-08-16 в 05:01 / МатериалСпам
Зачем демо? когда и так всем понятно как он работает
0
Deniss Lvov 2015-08-16 в 05:00 / МатериалСпам
Нашел ему применение!
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.