Нарисовать разные слои так, чтобы не сбился весь дизайн

230

26 июля 2017, 20:35

Есть страница, составленная из квадратиков как на фотографии ниже(1). И все они расположены плотно друг к другу. Как можно нарисовать такую анимацию(2) при наведении мыши так, чтобы все остальное не сбивалось. Пытался с помощью JS открывать скрытые блоки, но тогда все сбивалось.

Можно ли сделать это как-то поверх всего?

div{ 
   width: 150px; 
   height: 150px; 
   background: #c44444; 
   }

<div>Состав</div>

Answer 1

Можно сделать так:

.block { 
  width: 150px; 
  height: 150px; 
  position: relative; 
  background: #e9e9e9; 
  margin: 20px; 
  float: left; 
} 
 
.inner { 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  transition: all 0.4s ease; 
} 
 
.inner-1 { 
  background: #ccc; 
} 
 
.inner-2 { 
  background: #c44444; 
} 
 
.block:hover .inner { 
  transform: translate(10px, -10px); 
}

<div class="block"> 
  <div class="inner inner-1"> 
    <div class="inner inner-2"></div> 
  </div> 
</div> 
 
<div class="block"> 
  <div class="inner inner-1"> 
    <div class="inner inner-2"></div> 
  </div> 
</div> 
 
<div class="block"> 
  <div class="inner inner-1"> 
    <div class="inner inner-2"></div> 
  </div> 
</div> 
 
<div class="block"> 
  <div class="inner inner-1"> 
    <div class="inner inner-2"></div> 
  </div> 
</div> 
 
<div class="block"> 
  <div class="inner inner-1"> 
    <div class="inner inner-2"></div> 
  </div> 
</div> 
 
<div class="block"> 
  <div class="inner inner-1"> 
    <div class="inner inner-2"></div> 
  </div> 
</div> 
 
<div class="block"> 
  <div class="inner inner-1"> 
    <div class="inner inner-2"></div> 
  </div> 
</div>

А можно и с box-shadow:

.block { 
  width: 150px; 
  height: 150px; 
  position: relative; 
  margin: 20px; 
  float: left; 
} 
 
.inner { 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  transition: all 0.4s ease; 
  background: #c44444; 
} 
 
.block:hover .inner { 
  transform: translate(20px, -20px); 
  box-shadow: -10px 10px 0px #ccc, -20px 20px 0px #e9e9e9; 
}

<div class="block"> 
  <div class="inner inner"> 
 
  </div> 
</div> 
 
<div class="block"> 
  <div class="inner inner"> 
 
  </div> 
</div> 
 
<div class="block"> 
  <div class="inner inner"> 
 
  </div> 
</div> 
 
<div class="block"> 
  <div class="inner inner"> 
 
  </div> 
</div> 
 
<div class="block"> 
  <div class="inner inner"> 
 
  </div> 
</div> 
 
<div class="block"> 
  <div class="inner inner"> 
 
  </div> 
</div>