ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект всплывающего окна на HTML и CSS

Эффект всплывающего окна на HTML и CSS

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

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

При открытие страницы или сайта, где картинка по умолчанию:

Красивый эффект при наведении на картинку

При наведение видим как с одной стороны появляется функционал:

Создание эффекта с изображением на CSS3 + HTML

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

Установка:

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

Если не подключены шрифтовые кнопки

Код

HTML

Код

CSS

Код

.absolunom {
  display: inline-absolunom;
  width: 31%;
  height: 42%;
}

.absolunom img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}
.absolunom > .snimki_kartinok {
  margin-right: 0.5em;
  position: relative;
  overflow: hidden; /* Add Later */
  background: #353434;
  box-shadow: 1px 2px 10px #353434;
  transition: all 0.9s ease;
  cursor: pointer;
}

.sotsialnaya_knopka {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 30%;
  padding-right: 1.4em;
  transform: translateY(100px);
  transition: transform 0.8s ease;
  background: lightcyan;
  cursor: pointer;
}
.sotsialnaya_knopka i {
  font-size: 25px;
  padding: 0.4em;
  float: right;
  color: #353434;
}
.sotsialnaya_knopka i:hover {
  color: lightcoral;
}

.absolunom > .snimki_kartinok:hover .sotsialnaya_knopka {
  transform: rotate(-10deg) translateY(40px);
}
.snimki_kartinok:hover img {
  mix-blend-mode: soft-light;
  transform: scale(1.2);
}

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

Также прописать кратко по изображению, что отлично сочетается с поисковыми системами. Для установки социальных иконок у нас есть шрифт, так что вам просто нужно вызвать классы значков шрифтов, чтобы вставить значок.

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

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

21 Мая 2020 Загрузок: 1 Просмотров: 1132 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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