hover effect concept (diagonal slice)

In this example below you will see how to do a hover effect concept (diagonal slice) with some HTML / CSS and Javascript

diagonal slicing hover efffect

Thumbnail
This awesome code was written by ⁣, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>hover effect concept (diagonal slice)</title>
  
  
  
  
  
</head>

<body>

  
<div class="grid">    
  <div class="pane #{className}">
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="text">
      <p>eastbound and down</p>
    </div>
  </div>
  <div class="pane #{className}">
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="text">
      <p>my name is earl</p>
    </div>
  </div>
  <div class="pane #{className}">
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="text">
      <p>wilfred</p>
    </div>
  </div>
  <div class="pane #{className}">
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="part"> 
      <div class="slice">
        <div class="img">
          <div class="bimg"></div>
        </div>
      </div>
    </div>
    <div class="text">
      <p>trailer park boys</p>
    </div>
  </div>
</div>
  
  

</body>

</html>

Comments

More from ⁣

pure CSS DNA

pure CSS DNA

By pixelass
Live editing text on a canvas

Live editing text on a canvas

By pixelass
3d eye |&#xA0;pure CSS

3d eye | pure CSS

By pixelass
element queries concept

element queries concept

By ⁣

You Might Also Like

Jimmy Page Tribute Page

Jimmy Page Tribute Page

By BrianBrain
slider pure js and css3

slider pure js and css3

By zakariamouhid
project5

project5

By EmilyK
Composite Example

Composite Example

By curveball
Animated Background Gradient

Animated Background Gradient

By Nazar_TheVis
Asimov

Asimov

By tomasonn
Admin panel+pagination

Admin panel+pagination

By vovant123
A Pen by Melissa Beltran

A Pen by Melissa Beltran

By Melissa_Beltran0507
© 2018 - Copyright CodeSeek.co
contact email