Простая идея для стартового экрана на HTML&CSS

YouTube
Добавлено: 11 марта 2019 г.

Всем привет.

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

Код

HTML

<div class="box">
	<div class="box__item"></div>
	<div class="box__item"></div>
	<div class="box__item"></div>
	<div class="box__item"></div>
	<div class="box__item"></div>
	<div class="box__item">H</div>
	<div class="box__item">O</div>
	<div class="box__item">V</div>
	<div class="box__item">E</div>
	<div class="box__item">R</div>
	<div class="box__item"></div>
	<div class="box__item"></div>
	<div class="box__item">M</div>
	<div class="box__item">E</div>
	<div class="box__item"></div>
	<div class="box__item"></div>
	<div class="box__item"></div>
	<div class="box__item"></div>
	<div class="box__item"></div>
	<div class="box__item"></div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box{
  background-image: url(../img/bg.jpg);
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.box__item{
  color: #fff;
  min-width: 20%;
  padding: 5%;
  background-color: #000;
  transition: all .2s ease-in;
  transition-delay: .4s;
  text-align: center;
}

.box__item-hover{
  opacity: 0;
  transition: none;
}

JS

$('.box__item').hover(function(){
    $(this).addClass('box__item-hover');
}, function(){
    $(this).removeClass('box__item-hover');
})

Не забудьте подключить JQuery в конце страницы.

Пишите ваши идеи для применения в комментариях к видео