ZorNet.Ru — сайт для вебмастера » HTML и CSS » Изображение при наведении на ссылку

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

Изображение при наведении на ссылку
Оригинальное решение для тематических сайтов, как появление картинки при наведении на ссылку для перехода, где задействованы чистые стили CSS. Как можно наблюдать на закрепленном снимке, то такой эффект не на все тематики подойдет. Но с другой стороны, здесь можно просто изменить картинку и сделать более близкой к теме сайта. Где для этого рассмотрим сразу несколько вариантов внедрение такого эффекта.

Если первый вариант идет со стилями, и в них нужно выставлять основу изображение, то во втором уже размещение проходит в HTML. Такой подход безусловно оригинальный, но действующий по своей информатике, ведь переходя по ссылки вы изначально видите тему, как наглядная графическая информация. Где во многих случаях размещение информации станет востребован в использования данного метода.

Первый вариант:

HTML

Код
<div class="stavleniya uchayak">
  <div class="kicheson">
  <div class="vanormad">
  <p>Здесь идет краткое описание и подходим к ссылке <a class="myskina" href="#">где нужно вачести сбда клик</a> и уведите изображение</p>
  </div>
  </div>
</div>

CSS

Код
.stavleniya {
  display: table;
  height: 100%; width: 100%;
  background: #2D2D2D;
  background: -webkit-radial-gradient(circle closest-side at center, #5a5959, #312f2f);
  background: -moz-radial-gradient(circle closest-side at center, #5a5959, #312f2f);
  background: -ms-radial-gradient(circle closest-side at center, #5a5959, #312f2f);
  background: radial-gradient(circle closest-side at center, #5a5959, #312f2f);
}

.kicheson {
  display: table-cell;
  vertical-align: middle;
}

.uchayak, .vanormad {
  text-align: center;
  margin: 0 auto;
}

h1 {
  font-size: 5em;
  letter-spacing: 18px;
  color: #FFCC00;
  margin: -1em 0 0 0;
  text-shadow: 4px 4px 18px #111;
}

@keyframes wave {
  0% { transform: rotate(8deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(8deg); }
}

@-webkit-keyframes wave {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(10deg); }
  100% { -webkit-transform: rotate(0deg); }
}

p {
  font-size: 110%;
  font-family: Helvetica, sans;
  max-width: 24em;
  margin: 0 auto;
  text-align: justify;
  color: #afafaf;
  font-weight: lighter;
  line-height: 1.5em;
}

a {
  color: #dcd5d5;
  text-decoration: none;
  border-bottom: solid thin #f7901d;
}

a:hover {
  color: #ec830c;
}

.myskina {
  position: relative;
}

.myskina:before, .myskina:after {
  position: absolute;
  transition: all 0.15s ease;
}

.myskina:before {
  top: -75px;
  left: -70px;
  -webkit-transform:rotate(0deg) scale(0);
  -moz-transform:rotate(0deg) scale(0);
  -o-transform:rotate(0deg) scale(0);
  -ms-transform:rotate(0deg) scale(0);
  transform:rotate(0deg) scale(0);
}

.myskina:after {
  top: -115px;
  right: -70px;
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
  -webkit-transform:rotateY(180deg) scale(0);
  -moz-transform:rotateY(180deg) scale(0);
  -o-transform:rotateY(180deg) scale(0);
  -ms-transform:rotateY(180deg) scale(0);
  transform:rotateY(180deg) scale(0);
}

.myskina:hover:before {
  top: -140px;
  -webkit-transform:rotate(15deg) scale(1);
  -moz-transform:rotate(15deg) scale(1);
  -o-transform:rotate(15deg) scale(1);
  -ms-transform:rotate(15deg) scale(1);
  transform:rotate(15deg) scale(1);  
}

.myskina:hover:after {
  -webkit-transform:rotateY(180deg) scale(0.7);
  -moz-transform:rotateY(180deg) scale(0.7);
  -o-transform:rotateY(180deg) scale(0.7);
  -ms-transform:rotateY(180deg) scale(0.7);
  transform:rotateY(180deg) scale(0.7);
}

.myskina:before, .myskina:after {
  content: url('Ссылка на картинку');
}

Здесь по умолчанию идет оформление ключевого слова или текста, что будет подчеркнуто в светло желтом оттенке, так как вся стилистика настроена под темный дизайне сайта. Если у вас светлый, то вам просто нужно в CSS поставить ту палитру цвета, что соответствует дизайну.

Демонстрация

Второй вариант:

HTML

Код
<a class="mekina-buleva" href="/">НАВЕДИ НА МЕНЯ КУРСОР<span><img class="klass" src="http://zornet.ru/_fr/83/s0899052.jpg"></span></a>

CSS

Код
.mekina-buleva span{
  border-radius: 5px 5px 5px 5px;
  visibility: hidden;
  position: absolute;
  left: 258px;
  background: #f1eaea;
  box-shadow: -2px 2px 10px -1px #2f2e2e;  
  border-radius: 5px;
  width: 18%;
  z-index: 9999;
}
.mekina-buleva:hover span{
visibility: visible;
}

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

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

Демонстрация
27 Октября 2019 Загрузок: 1 Просмотров: 3818 Комментариев: (4)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 4
noavatar
lexxel 27 Июля 2021 17:091
0
Отлично работает на компьютере и на Android. А вот на iPhone картинка демонстрируется сразу. Как исправить?
noavatar
lexxel 27 Июля 2021 17:422
0
Нашел решение: в CCS надо добавить:
.mekina-buleva span {
visibility: hidden;
Сопрано
Сопрано 27 Июля 2021 21:283
0
Что то в дизайне добавляет?
-SAM-
-SAM- 28 Июля 2021 15:314
0
Оно уже до этого и так было там.
avatar