ZorNet.Ru — сайт для вебмастера » HTML и CSS » Hover эффект для изображения через CSS

Hover эффект для изображения через CSS

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

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

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

При проверки на работоспособность:

HTML

Код

<figure class="gakeground-karadenutas">
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/delopas.jpg" alt="zornet.ru"/>
  <figcaption>
  <div><h2>ZorNet.Ru - портал вебмастера</h2></div>
  <div>
  <p>Красиво выполнен вид изображения наведения с использованием скручивания страниц.</p>
  <div class="kopetomed"></div>
  </div>
  <a href="#"></a>
  </figcaption>
</figure>

CSS

Код

figure.gakeground-karadenutas {
  color: #f7f4f4;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 25px 5%;
  min-width: 215px;
  max-width: 325px;
  max-height: 205px;
  width: 100%;
  background: #171616;
  text-align: center;
  border: 2px solid #afacac;
  border-radius: 3px;
}

figure.gakeground-karadenutas * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.gakeground-karadenutas img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.30s;
  transition: opacity 0.30s;
}
figure.gakeground-karadenutas figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
figure.gakeground-karadenutas figcaption > div {
  height: 50%;
  overflow: hidden;
  width: 100%;
  position: relative;
}
figure.gakeground-karadenutas figcaption::before {
  position: absolute;
  top: 50%;
  right: 50%;
  left: 50%;
  height: 2px;
  content: '';
  opacity: 0;
  background-color: rgba(245, 237, 237, 0);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}
figure.gakeground-karadenutas h2,
figure.gakeground-karadenutas p {
  margin: 0;
  padding: 28px 25px;
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s,-webkit-transform 0.5s,-moz-transform 0.5s,-o-transform 0.5s,transform 0.5s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
figure.gakeground-karadenutas h2 {
  display: inline-block;
  word-spacing: -0.2em;
  font-weight: 500;
  text-transform: uppercase;
  bottom: 0;
  background: rgba(21, 20, 20, 0.52);
  background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0.3) 0%, transparent 60%, rgba(4, 4, 4, 0.3) 100%);
  -webkit-transform: translate3d(0%, 50%, 0);
  transform: translate3d(0%, 50%, 0);
}
figure.gakeground-karadenutas h2 span {
  font-weight: 800;
}
figure.gakeground-karadenutas p {
  font-weight: 500;
  top: 0%;
  color: #1d1c1c;
  background: #f9f7f7;
  background-image: linear-gradient(to bottom, rgba(19, 18, 18, 0.3) 0%, transparent 40%, rgba(8, 8, 8, 0.3) 100%);
  -webkit-transform: translate3d(0%, -50%, 0);
  transform: translate3d(0%, -50%, 0);
}
figure.gakeground-karadenutas .kopetomed {
  width: 0px;
  height: 0px;
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, #fbf7f7, #f3f3f3 20%, #c5bdbd 38%, #a59f9f 44%, #a59d9d 50%, rgba(25, 24, 24, 0.45) 50%, rgba(27, 25, 25, 0.51) 60%, rgba(29, 28, 28, 0.39));
  box-shadow: 0 0 9px rgba(25, 23, 23, 0.28);
  transition: all .4s ease;
}
figure.gakeground-karadenutas .kopetomed:before,
figure.gakeground-karadenutas .kopetomed:after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 12%;
  bottom: 6%;
  width: 68%;
  max-width: 300px;
  max-height: 100px;
  height: 50%;
  box-shadow: 0 12px 15px rgba(16, 16, 16, 0.38);
  transform: skew(-10deg) rotate(-6deg);
}
figure.gakeground-karadenutas .kopetomed:after {
  left: auto;
  right: 7%;
  bottom: auto;
  top: 15%;
  transform: skew(-15deg) rotate(-84deg);
}
figure.gakeground-karadenutas a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #fbf7f7;
}
figure.gakeground-karadenutas:hover img,
figure.gakeground-karadenutas.hover img {
  opacity: 0.8;
}
figure.gakeground-karadenutas:hover figcaption h2,
figure.gakeground-karadenutas.hover figcaption h2,
figure.gakeground-karadenutas:hover figcaption p,
figure.gakeground-karadenutas.hover figcaption p {
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.4s;
}
figure.gakeground-karadenutas:hover figcaption h2,
figure.gakeground-karadenutas.hover figcaption h2 {
  opacity: 1;
}
figure.gakeground-karadenutas:hover figcaption p,
figure.gakeground-karadenutas.hover figcaption p {
  opacity: 1;
}
figure.gakeground-karadenutas:hover figcaption::before,
figure.gakeground-karadenutas.hover figcaption::before {
  background: #fbf7f7;
  left: 0px;
  right: 0px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.gakeground-karadenutas:hover figcaption .kopetomed,
figure.gakeground-karadenutas.hover figcaption .kopetomed {
  width: 38px;
  height: 38px;
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

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

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

03 Сентября 2018 Просмотров: 1213 Комментариев: (1)

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

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 03 Сентября 2018 12:50¹ 0 Если у вас подключен модуль фотографий, то вероятно можно туда поставить, хотя не знаю, возможно система обновила, но ранее там была засада.