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

lime-Card

lime-Card

By Tenesan
A Pen by messer

A Pen by messer

By sergeymesser
Sweater Cost Calculator

Sweater Cost Calculator

By lowbelly
A Pen by Tamik Soziev

A Pen by Tamik Soziev

By usaphp
Creating Canvas Elements &#x2014; Week Three

Creating Canvas Elements — Week Three

By stacylove
A Pen by Friend

A Pen by Friend

By ambiss
A Pen by Fersho Pls

A Pen by Fersho Pls

By fershopls
CSS Hexagon made of triangles

CSS Hexagon made of triangles

By MattH22
© 2018 - Copyright CodeSeek.co
contact email