Cards with beautiful hover effects using pure css3

Card view developed using HTML and css 3 properties like grid, transform and transition etc. Mouse over effect beautifully blended with border colors. Code demo, download and preview are available.

HTML Snippet

<div class="container">   <div class="items">     <div class="icon-wrapper">       <i class="fa fa-file-text-o"></i>     </div>     <div class="project-name">       <p>w3</p>     </div>   </div>   <div class="items">     <div class="icon-wrapper">       <i class="fa fa-th-list"></i>     </div>     <div class="project-name">       <p>tweaks</p>     </div>   </div>   <div class="items">     <div class="icon-wrapper">       <i class="fa fa-th-large"></i>     </div>     <div class="project-name">       <p>COLLECTIONS</p>     </div>   </div>   </div>

CSS Code

body {   background-color: #FD2549;   box-sizing: border-box;   font-family: 'Raleway', sans-serif; }  .container {   width: 750px;   height: 250px;   position: absolute;   top: 0;   left: 0;   right: 0;   bottom: 0;   margin: auto;   box-sizing: border-box;   display: grid;   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));   grid-template-rows: 1fr;   grid-gap: 15px; }  .items {   border-radius: 5px;   display: grid;   grid-template-rows: 2fr 1fr;   grid-gap: 10px;   cursor: pointer;   border: 3px dotted black;   transition: all 0.6s; }  .icon-wrapper, .project-name {   display: flex;   align-items: center;   justify-content: center; }  .icon-wrapper i {   font-size: 100px;   color: #E5E6F1;   transform: translateY(0px);   transition: all 0.6s; }  .icon-wrapper {   align-self: end; }  .project-name {   align-self: start; }  .project-name p {   font-size: 24px;   font-weight: bold;   letter-spacing: 2px;   color: #E5E6F1;   transform: translateY(0px);   transition: all 0.5s; }  .items:hover {   border: 3px solid #E5E6F1; } .items:hover .project-name p {   transform: translateY(-10px); } .items:hover .icon-wrapper i {   transform: translateY(5px); }

Preview