Появление изображение при наведении на ссылку - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Появление изображение при наведении на ссылку (Всплывающая картинка при наведении на ссылку на CSS)

Появление изображение при наведении на ссылку

Kosten

Вторник, 23 Мая 2017, 14:10 | Сообщение 1

Администраторы

Сообщений:44171

Награды: 70

« 565 »

Мы уже привыкли, что видя изображение мы делаем по нему клик и оно увеличивается. А вот как к примеру вы сделаете в надписи или в строке, поставите картинку, то будет не красиво и криво. И здесь нам пригодиться эти стили, которые могут сделать все очень шикарно при написание или просто где то поставить и написать рядом, можете посмотреть и вам только надо навести. Пропишу сразу два 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>

Теперь давайте рассмотрим второй вариант.

Здесь все также создано на чистых стилях и в CSS

Код

/*Всплывающий скриншот*/
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #3d3d3d;
padding: 5px;
left: -1000px;
border: 1px solid white;
visibility: hidden;
color: Yellow;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
/*---------------------*/

Это код под второй вариант.

Код

<a class="thumbnail" href="#">Ссылка<span>Здесь описание<img src="ВАША КАРТИНКА" width="500"/></span></a>

Как видите они почти одинаковые, но просто первый сделан так, что вид материала модуля можно установить, да применение много найти по этим эффектам найти.

Комментарий на этот скрипт:

1. Знал эту фишку еще раньше и на многих сайтах ее видел. А что на счет вид материала, то вот как некоторые делали, и что главное не каких файлов, а чистый CSS, что реально порадовало.

2. Это уже старый код, говорю про второй, он давно в паблике, а первый не отличается от второго, только стили по другому настроены.

3. Картинку свою поставил, правильно, нужно оригинально а не как у всех. Коды эти правильно говорите старые, но они актуальные и их применяют очень много где на сайтах.

4. Сейчас второй код проверил, не чего быстро выскакивает изображение. Первый пока не проверял, хочу на вид материала его проверить, должен отлично влиться.

5. А это отличная идея в описание вставлять, к примеру, вот так и сы можете посмотреть как у вас будет и "будут" в этом слове картинка, по мне все отлично впишется и поисковики думаю быстро найдут.

6. Всегда такие коды рабочие пригодятся, если одному не нужно, это не факт, что он всем не нравиться.

7. Когда рабочие ссылки и сделан скрипт отлично, он всегда будет нужен.

8. Могу по пальцем перещелкать, где точно нет битых ссылок, но спамить не буду, да из вообще мало. Скопируют и дело в шляпе, даже пару слов от себя не напишут.

9. Это просто от незнание они оставляют ссылки, не зная, что будет с тем ресурсом завтра, может его снесут или папку уберут, где она находиться и от этого битые.

10. Раньше как помню хостинг радикал был и вот как видишь скрипт, если одна рабочая ссылка, это не означает, что остальные такие же.

11. Да, был такой и есть наверное, самый популярный был, но только не сейчас. Вообще иногда пользуюсь этим хостингом prnt.sc, все отлично, есть свой профиль и в нем все что ты загрузил, не одной еще не пропало, но не заметил, а им пользуюсь долго.

Прикрепления: 3888205.jpg (27.4 Kb) · 7259850.jpg (57.5 Kb)

[ RU ]