ZorNet.Ru — сайт для вебмастера » HTML и CSS » 3 невероятных эффекта CSS при наведении

3 невероятных эффекта CSS при наведении

Данный эффект изображения, где идет заголовок и позиция с эффектом наведения, что меняется с наведением клика по цветовой гамме при помощи CSS. Это один из многих примеров, где задействовано изображение, плюс присутствует заголовок, который аналогично меняет оттенок с эффектом наведения. Все исключительно создано с использованием HTML, CSS и JavaScript. Если рассматривать шрифты под изображения, то здесь импортируются в форму с их URL-адресами. Функции JavaScript были использованы для реализации эффектов наведения мыши, хотя можно на чистом стиле, так как это касается второго варианта и не больше.

Карточке или вид материалов, где присутствует изображения, то здесь присваиваются стили шрифта семейства шрифтов 'Raleway', Arial, sans-serif, положение относительно, отображение в виде встроенного блока, поля в 10 пикселей, минимальной ширины в 250 пикселей, максимальной ширины в 310 пикселей, фона в качестве фона. Все это представлено на demo страницы, где можно все кардинально проверить на работоспособность.

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

Изображение, заголовок и позиция с эффектом наведения

Оригинальные hover-эффект на изображение

HTML

Код

<figure class="pudsanu-meduga"><img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/sedam-lodsab.jpg" alt="Красивый эффект"/>
  <figcaption>
  <h3>ZorNet.Ru</h3>
  <h5>Сайт для вебмастера</h5>
  </figcaption><a href="http://zornet.ru"></a>
</figure>

CSS

Код

.pudsanu-meduga {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 10px;
  min-width: 225px;
  max-width: 320px;
  width: 100%;
  background-color: #151414;
  color: #f9f8f8;
  text-align: left;
  font-size: 16px;
  box-shadow: 0 0 5px rgba(12, 12, 12, 0.15);
}
.pudsanu-meduga * {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.pudsanu-meduga img {
  max-width: 100%;
  vertical-align: top;
}
.pudsanu-meduga figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-color: rgba(6, 6, 6, 0.75);
}
.pudsanu-meduga h3 {
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  margin: 3px 0;
}
.pudsanu-meduga h5 {
  font-weight: 400;
  margin: 0;
  color: #adadad;
  letter-spacing: 1px;
}
.pudsanu-meduga a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.pudsanu-meduga:hover figcaption,
.pudsanu-meduga.hover figcaption {
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background-color: #f9f8f8;
}
.pudsanu-meduga:hover h3,
.pudsanu-meduga.hover h3,
.pudsanu-meduga:hover h5,
.pudsanu-meduga.hover h5 {
  color: #272626;
}

Здесь версия, которая создана по функциям и по эффектам, только при чистом CSS. Если вам нужно задействовать JavaScript, то на demo странице идет полностью материал, но здесь посчитал скрипт лишним, так как css отлично справляется.

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

Вид с заголовок и позиция с эффектом наведения CSS

Текстовой шрифт

Код

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

HTML

Код

<figure class="kudes-kavamu"><img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/lofdsanekad.jpg" alt="Дизайн для сайта"/>
  <figcaption><i class="ion-podium"></i>
  <h4>Название</h4>
  <h2>Кратко описываем файлы.</h2>
  </figcaption><a href="Ссылка для перехода"></a>
</figure>

CSS

Код

figure.kudes-kavamu {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 225px;
  max-width: 320px;;
  width: 100%;
  color: #131212;
  text-align: center;
  -webkit-perspective: 50em;
  perspective: 50em;
}
figure.kudes-kavamu * {
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
figure.kudes-kavamu img {
  max-width: 100%;
  vertical-align: top;
}
figure.kudes-kavamu figcaption {
  top: 50%;
  left: 20px;
  right: 20px;
  position: absolute;
  opacity: 0;
  z-index: 1;
  -webkit-transform: translate(-10%, -50%);
  transform: translate(-10%, -50%);
}
figure.kudes-kavamu h2,
figure.kudes-kavamu h4 {
  margin: 0;
}
figure.kudes-kavamu h2 {
  font-weight: 600;
}
figure.kudes-kavamu h4 {
  font-weight: 400;
  text-transform: uppercase;
}
figure.kudes-kavamu i {
  font-size: 32px;
}
figure.kudes-kavamu:after {
  background-color: #f9f8f8;
  position: absolute;
  content: "";
  display: block;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  opacity: 0;
}
figure.kudes-kavamu a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.kudes-kavamu:hover figcaption,
figure.kudes-kavamu.hover figcaption {
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.kudes-kavamu:hover:after,
figure.kudes-kavamu.hover:after {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
  opacity: 0.9;
}

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

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

Третий вариант с оригинальным эффектом

Шрифтовые кнопки

Код

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

HTML

Код

<figure class="demusen-kogsaved"><img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/vesual.jpg" alt="ZorNet.Ru — сайт для вебмастера"/>
  <figcaption><i class="ion-upload"></i>
  <h4>Заголовок</h4>
  <h2>Здесь идет описание</h2>
  </figcaption><a href="Ссылка на материал"></a>
</figure>

CSS

Код

figure.demusen-kogsaved {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 225px;
  max-width: 320px;
  width: 100%;
  color: #151414;
  text-align: center;
  -webkit-perspective: 50em;
  perspective: 50em;
}
figure.demusen-kogsaved * {
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
figure.demusen-kogsaved img {
  max-width: 100%;
  vertical-align: top;
}
figure.demusen-kogsaved figcaption {
  top: 50%;
  left: 20px;
  right: 20px;
  position: absolute;
  opacity: 0;
  z-index: 1;
}
figure.demusen-kogsaved h2,
figure.demusen-kogsaved h4 {
  margin: 0;
}
figure.demusen-kogsaved h2 {
  font-weight: 600;
}
figure.demusen-kogsaved h4 {
  font-weight: 400;
  text-transform: uppercase;
}
figure.demusen-kogsaved i {
  font-size: 32px;
}
figure.demusen-kogsaved:after {
  background-color: #f9f8f8;
  position: absolute;
  content: "";
  display: block;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  opacity: 0;
}
figure.demusen-kogsaved a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.demusen-kogsaved:hover figcaption,
figure.demusen-kogsaved.hover figcaption {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.demusen-kogsaved:hover:after,
figure.demusen-kogsaved.hover:after {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  opacity: 0.9;
}

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

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

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

31 Декабря 2019 Загрузок: 1 Просмотров: 1153 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0