grid to list icon

In this example below you will see how to do a grid to list icon with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by alexnewman, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alexnewman ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>grid to list icon</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <article>
	<div><span></span>
	<span></span>
	<span></span></div>
	<div><span></span><span></span><span></span></div>
	<div><span></span>
	<span></span>
	<span></span></div>

</article>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/alexnewman/grid-to-list-icon-bgPmxp */
body {
  background: #c0ff33;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

div {
  width: 100%;
  height: 10px;
  display: flex;
  justify-content: space-between;
}

span {
  width: 10px;
  height: 10px;
  -webkit-transform: scale(1) translateZ(0);
          transform: scale(1) translateZ(0);
  background: #476600;
  transition: 0.1s ease transform;
  -webkit-transform-origin: left;
          transform-origin: left;
  display: block;
}
span:first-child {
  -webkit-transform-origin: left;
          transform-origin: left;
  transition: none;
  -webkit-transform: scale(1) translateZ(0) !important;
          transform: scale(1) translateZ(0) !important;
}
span:last-child {
  -webkit-transform-origin: right;
          transform-origin: right;
}

article {
  width: 50px;
  display: flex;
  justify-content: space-between;
  height: 50px;
  flex-direction: column;
}

article:hover span {
  -webkit-transform: scale(1.7, 1) translateZ(0);
          transform: scale(1.7, 1) translateZ(0);
}

Comments