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

Наложение изображения на видео в CSS

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

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

Так после установки получится, здесь как можно заметить поставлен логотип:

Как наложить изображение на видео при помощи CSS3

HTML

Код

CSS

Код

*,
:after,
:before {
  box-sizing: inherit;
}

body {
  background: rgb(72, 75, 84);
  font-family: 'Roboto', sans-serif;
  color: #b6b6b6;
  margin: 0;
}

.supeg_abuloka {
  margin: 2em auto;
}

@media (min-width: 1200px) {
  .supeg_abuloka {
  width: 1170px;
  }
}

@media (min-width: 992px) {
  .supeg_abuloka {
  width: 970px;
  }
}

@media (min-width: 768px) {
  .supeg_abuloka {
  width: 750px;
  }
}

a {
  color: #6c7d00;
  text-decoration: none;
}

a:hover {
  color: #17aa2e;
}

.kaona_sayta_sumos {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
}

.kaona_sayta_sumos iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.ustanovka_video_kaches {
  background: transparent;
  position: absolute;
  top: 10%;
  left: 2%;
  width: 36%;
  max-width: 320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.ustanovka_video_kaches img {
  width: 100%;
  /* ширина картинки */
  height: auto;
  /* высота картинки */
}

.ustanovka_video_kaches h1 {
  color: red;
  font-family: "Nobile", sans-serif;
  font-size: 2em;
  margin: 0;
  padding: 0;
  text-align: center;
}

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

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

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

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

СКАЧАТЬ

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

Kosten

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