БЛОГ НА HUSL


Как делают такой хавер эффект?

Автор вопроса: emptyman

Не могу понять как делают подобные хаверы, даже не знаю с какой стороны подступиться, одним только box-shadow тут явно не обойтись.. Добавлять в разметку парочку дивов единственный вариант?

P.S.изображение с пинтереста, так что посмотреть код не получится)

hover-effect


Источник

Ответы (2 шт):

Автор решения: Alexandr_TT

Как-то так:

.container {
width:50vw;
height:50vh;
}
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 300 188">  
  <rect id="rect1" x="20" y="17" width="255" height="153" fill="dodgerblue" >
    <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.4s" values="0 147.5 93.5;8 147.5 93.5" repeatCount="1" fill="freeze" />  
       <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseout"  dur="0.4s" values="8 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" /> 
  </rect> 
    <rect id="rect2" x="20" y="17" width="255" height="153" fill="skyblue" >
     <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.4s"  values="0 147.5 93.5;-6 147.5 93.5" repeatCount="1" fill="freeze" />  
       <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseout"  dur="0.4s" v values="-6 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" /> 
  </rect>  
      <rect id="rect3" x="20" y="17" width="255" height="153" fill="skyblue" >
     <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.4s"  values="0 147.5 93.5;4 147.5 93.5" repeatCount="1" fill="freeze" />  
       <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseout"  dur="0.4s" v values="4 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" /> 
  </rect>
<image id="img1" xlink:href="https://i.stack.imgur.com/vylHA.png" x="20" y="15" width="85%" height="85%"  />
</svg>   
</div>

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

Центр вращения прямоугольников вычисляется с помощью метода JS getBBox():

<script>
 let bb = rect.getBBox();
  console.log(bb.x + bb.width / 2);
   console.log(bb.y + bb.height / 2);
 </script>

Update

Вариант с добавлением тени с SVG фильтрами

.container {
width:50vw;
height:50vh;
}
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 300 188">  
<defs>
    <filter id="dropshadow" height="250%" width="200%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
      <feOffset dx="1" dy="2" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>       
  <rect id="rect1" filter="url(#dropshadow)" x="20" y="17" width="255" height="153" fill="dodgerblue" stroke="dodgerblue" >
    <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.4s" values="0 147.5 93.5;8 147.5 93.5" repeatCount="1" fill="freeze" />  
       <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseout"  dur="0.4s" values="8 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" /> 
  </rect> 
    <rect id="rect2" filter="url(#dropshadow)" x="20" y="17" width="255" height="153" fill="skyblue" >
     <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.4s"  values="0 147.5 93.5;-6 147.5 93.5" repeatCount="1" fill="freeze" />  
       <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseout"  dur="0.4s" v values="-6 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" /> 
  </rect>  
      <rect filter="url(#dropshadow)" id="rect3" x="20" y="17" width="255" height="153" fill="skyblue" >
     <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.4s"  values="0 147.5 93.5;4 147.5 93.5" repeatCount="1" fill="freeze" />  
       <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseout"  dur="0.4s" v values="4 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" /> 
  </rect>
<image id="img1" filter="url(#dropshadow)" xlink:href="https://i.stack.imgur.com/vylHA.png" x="20" y="15" width="85%" height="85%"  />
</svg>   
</div>

Последовательное появление теней

Каждая новая тень появляется с задержкой после окончания предыдущей анимации

  
 
.container {
width:50vw;
height:50vh;
}
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 300 188">  
<defs>
    <filter id="dropshadow" height="250%" width="200%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
      <feOffset dx="1" dy="2" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>       

  <rect id="rect1" filter="url(#dropshadow)" x="22" y="17" width="251" height="153" fill="dodgerblue" stroke="dodgerblue" >
    <animateTransform id="an1"  attributeName="transform" type="rotate" begin="img1.mouseover" dur="0.2s" values="0 147.5 93.5;8 147.5 93.5" repeatCount="1" fill="freeze" />  
       <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseout"  dur="0.4s" values="8 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" /> 
  </rect> 
    <rect id="rect2" filter="url(#dropshadow)" x="20" y="17" width="255" height="153" fill="skyblue" >
     <animateTransform  id="an2"  attributeName="transform" type="rotate" begin="an1.end" dur="0.2s"  values="0 147.5 93.5;-6 147.5 93.5" repeatCount="1" fill="freeze" />  
       <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseout"  dur="0.4s" v values="-6 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" /> 
  </rect>  
      <rect filter="url(#dropshadow)" id="rect3" x="20" y="17" width="255" height="153" fill="skyblue" >
     <animateTransform  id="an3"  attributeName="transform" type="rotate" begin="an2.end" dur="0.2s"  values="0 147.5 93.5;4 147.5 93.5" repeatCount="1" fill="freeze" />  
       <animateTransform   attributeName="transform" type="rotate" begin="img1.mouseout"  dur="0.4s" v values="4 147.5 93.5;0 147.5 93.5" repeatCount="1" fill="freeze" /> 
  </rect>
<image id="img1" filter="url(#dropshadow)" xlink:href="https://i.stack.imgur.com/vylHA.png" x="20" y="15" width="85%" height="85%"  />
</svg>   
</div>

→ Ссылка
Автор решения: Firsov36

Вот на css с div'ами

.body {
  position: relative;
  width: 400px;
  height: 300px;
  margin: 50px auto;
}

.picture, .shadow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid transparent;
  border-radius: 4px;
}

.picture {
  z-index: 10;
  background: #fff url('https://i.stack.imgur.com/vylHA.png') 50% 50% no-repeat;
  background-size: cover;
}

.shadow {
  z-index: 1;
  background: #1f35d5;
  transition: all 0.3s ease;
}


.body:hover .shadow:nth-child(1) {}
.body:hover .shadow:nth-child(2) {
  transform: translate(6px, -6px);
  opacity: 0.3;
}
.body:hover .shadow:nth-child(3) {
  transform: translate(-5px, -1px) rotate(-5deg);
  opacity: 0.7;
}
.body:hover .shadow:nth-child(4) {
  transform: translate(10px, 7px) rotate(4deg);
  opacity: 0.4;
}
.body:hover .shadow:nth-child(5) {
  transform: translate(13px,-5px) rotate(-8deg);
  opacity: 0.2;
}
<div class="body">
  <div class="picture"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.