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

AK Spring 2017 Style Guide

AK Spring 2017 Style Guide

By bonefold
Floating Crystals

Floating Crystals

By Fafnir
Open Source Coding Main Page

Open Source Coding Main Page

By NateBernstein
A Pen by Jose Rodriguez

A Pen by Jose Rodriguez

By joseluisrod
wiki search

wiki search

By hnsxxscyx
Vectors

Vectors

By markhkr
freeCodeCamp | Camper News

freeCodeCamp | Camper News

By taylor-jones
Cycling cursor trails (interactive)

Cycling cursor trails (interactive)

By zachernuk
© 2018 - Copyright CodeSeek.co
contact email