Плавное наложение элементов

by Ksenia Polyakova

HTML

<div class="aa">
  <div class="bb"><p>some-text</p></div>
</div>

CSS

* {
  margin: 0;
  padding:0;
}

.aa {
  width: 100px;
  height: 100px;
  background-color:olive;
}

.bb {
  width: 100px;
  height: 100px;
  display: block;
  opacity: 0;
}

 p {
  opacity: 0;
} 

.bb:hover {
}

.aa:hover > .bb {
  background-color: lime;
  opacity: 0.5;
  transition: all 1s linear;
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
}

.aa:hover > .bb > p {
  opacity: 1;
  transition-delay: 1.3s;
}