How To Create 2D Animation On Hover

In this topic,

We are going to see how to create 2d animation on hover.

Step-1: Create Html Code in the index.html file.

<body>	
  <div class="main-hover-section">
    <div class="main-hover-inner-section container">
      <div class="hover-section-row">
        <div class="hover-section-col">
          <div class="animation-hover-box">
            <div class="animation-hover-box-image-col">
              <div class="animation-hover-box-image">
                <img src="image/face-04.jpg" alt="face-one" height="300" width="300">
              </div>
              <div class="animation-hide-col">
                <div class="hide-button-col">
                  <div class="dimond-icon new-icon facebook-icon"><a href="#"><i class="fab fa-facebook-f"></i></i></a></div>
                  <div class="same-icon new-icon twitter-icon"><a href="#"><i class="fab fa-twitter"></i></a></div>
                  <div class="same-icon new-icon linkedin-icon"><a href="#"><i class="fab fa-linkedin-in"></i></a></div>
                  <div class="dimond-icon new-icon instagram-icon"><a href="#"><i class="fab fa-instagram"></i></a></div>
                </div>
              </div>
            </div>
            <div class="animation-hover-box-inner-content">
              <div class="animation-hover-box-content">
                <div class="name-with-occupation">
                  <h4 class="name-text">Williamson</h4> 
                  <span class="occupation-text">Web Devloper</span>
                </div>
                <span class="email-address">Email: <a href="#"><b>mail@example.com</b></a> </span>
              </div>
              <div class="animation-hover-hidden-content">
                <div>
                  <h4 class="name-text"><b>Williamson</b></h4> 
                  <span>Web Devloper</span>
                </div>
                
              </div>
            </div>
          </div>
          <div class="animation-hover-box">
            <div class="animation-hover-box-image-col">
              <div class="animation-hover-box-image">
                <img src="image/face-04.jpg" alt="face-one" height="300" width="300">
              </div>
              <div class="animation-hide-col">
                <div class="hide-button-col">
                  <div class="dimond-icon new-icon facebook-icon"><a href="#"><i class="fab fa-facebook-f"></i></i></a></div>
                  <div class="same-icon new-icon twitter-icon"><a href="#"><i class="fab fa-twitter"></i></a></div>
                  <div class="same-icon new-icon linkedin-icon"><a href="#"><i class="fab fa-linkedin-in"></i></a></div>
                  <div class="dimond-icon new-icon instagram-icon"><a href="#"><i class="fab fa-instagram"></i></a></div>
                </div>
              </div>
            </div>
            <div class="animation-hover-box-inner-content">
              <div class="animation-hover-box-content">
                <div class="name-with-occupation">
                  <h4 class="name-text">Williamson</h4> 
                  <span class="occupation-text">Web Devloper</span>
                </div>
                <span class="email-address">Email: <a href="#"><b>mail@example.com</b></a> </span>
              </div>
              <div class="animation-hover-hidden-content">
                <div>
                  <h4 class="name-text"><b>Williamson</b></h4> 
                  <span>Web Devloper</span>
                </div>
                
              </div>
            </div>
          </div>
          <div class="animation-hover-box">
            <div class="animation-hover-box-image-col">
              <div class="animation-hover-box-image">
                <img src="image/face-04.jpg" alt="face-one" height="300" width="300">
              </div>
              <div class="animation-hide-col">
                <div class="hide-button-col">
                  <div class="dimond-icon new-icon facebook-icon"><a href="#"><i class="fab fa-facebook-f"></i></i></a></div>
                  <div class="same-icon new-icon twitter-icon"><a href="#"><i class="fab fa-twitter"></i></a></div>
                  <div class="same-icon new-icon linkedin-icon"><a href="#"><i class="fab fa-linkedin-in"></i></a></div>
                  <div class="dimond-icon new-icon instagram-icon"><a href="#"><i class="fab fa-instagram"></i></a></div>
                </div>
              </div>
            </div>
            <div class="animation-hover-box-inner-content">
              <div class="animation-hover-box-content">
                <div class="name-with-occupation">
                  <h4 class="name-text">Williamson</h4> 
                  <span class="occupation-text">Web Devloper</span>
                </div>
                <span class="email-address">Email: <a href="#"><b>mail@example.com</b></a> </span>
              </div>
              <div class="animation-hover-hidden-content">
                <div>
                  <h4 class="name-text"><b>Williamson</b></h4> 
                  <span>Web Devloper</span>
                </div>
                
              </div>
            </div>
          </div>
          <div class="animation-hover-box">
            <div class="animation-hover-box-image-col">
              <div class="animation-hover-box-image">
                <img src="image/face-04.jpg" alt="face-one" height="300" width="300">
              </div>
              <div class="animation-hide-col">
                <div class="hide-button-col">
                  <div class="dimond-icon new-icon facebook-icon"><a href="#"><i class="fab fa-facebook-f"></i></i></a></div>
                  <div class="same-icon new-icon twitter-icon"><a href="#"><i class="fab fa-twitter"></i></a></div>
                  <div class="same-icon new-icon linkedin-icon"><a href="#"><i class="fab fa-linkedin-in"></i></a></div>
                  <div class="dimond-icon new-icon instagram-icon"><a href="#"><i class="fab fa-instagram"></i></a></div>
                </div>
              </div>
            </div>
            <div class="animation-hover-box-inner-content">
              <div class="animation-hover-box-content">
                <div class="name-with-occupation">
                  <h4 class="name-text">Williamson</h4> 
                  <span class="occupation-text">Web Devloper</span>
                </div>
                <span class="email-address">Email: <a href="#"><b>mail@example.com</b></a> </span>
              </div>
              <div class="animation-hover-hidden-content">
                <div>
                  <h4 class="name-text"><b>Williamson</b></h4> 
                  <span>Web Devloper</span>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>

Step-2: Add CSS Code in the <style>…</style> on the index.html file.

<style>
body{
  margin: 0;
}
.hover-section-col{
  display: flex;
  flex-wrap: wrap;
  margin: 0px -15px;
}
.animation-hover-box{
  width: 25%;
  padding: 0px 15px;
}
.main-hover-section {
    background-color: #e9e9e9;
    padding: 50px 15px;
}
.animation-hover-box-content, .animation-hover-hidden-content {
  background-color: #e7e7e7;
  padding: 25px;
  text-align: center;
  border: 1px solid #bbb;
}
.animation-hover-box-image-col, .animation-hover-box-image{
  position: relative;
}
.animation-hover-box-image:after {
  content: '';
  position: absolute;
  bottom: 90px;
  left: 100px;
  right: 100px;
  transform: scale(0);
  background: rgba(106, 100, 100, 0.5);
  transition: all 0.5s ease 0s;
}
.animation-hide-col {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.name-with-occupation {
  margin-bottom: 10px;
}
span.email-address {
  font-size: 18px;
}
.hide-button-col {
  text-align: center;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  transform: rotate(45deg);
  justify-content: center;
}
.new-icon {
  width: 67px;
  padding: 22px;
  opacity: 0;
  transition: all 0.5s ease 0s;
}
.new-icon a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  transition: all 0.5s ease 0s;
}
.new-icon a i{
  transform: rotate(-45deg);
}
.new-icon a:before {
  content: '';
  position: absolute;
  background-color: #ffffff;
  height: 45px;
  width: 45px;
  top: 0;
  left: 0;
  opacity: 1;
  color: #000;
  transform: rotate(0deg);
  transition: all 0.5s ease 0s;
}
.animation-hover-box-inner-content{
  position: relative;
}
.animation-hover-hidden-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid #7c7c7c;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.5s ease 0s;
  background: #ddd;
}
.animation-hover-box:hover .new-icon{
  width: 50px;
  padding: 3px;
  opacity: 1;
}
.animation-hover-box:hover .animation-hover-box-image:after{
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 0;
  transform: scale(1);
}
.animation-hover-box:hover .animation-hover-hidden-content {
  height: 160px;
  opacity: 1;
}
.animation-hover-box:hover .animation-hover-box-content{
  opacity: 0;
}
.hide-button-col .new-icon:hover a:before{
  transform: rotate(180deg);
  background-color: #000;
}
.hide-button-col .new-icon:hover a{
color: #ccc;
} @media only screen and (max-width: 991px){ .animation-hover-box{ width: 50%; padding-bottom: 35px; } .animation-hover-box:hover .new-icon{ width: 57px; padding: 5px; } } @media only screen and (max-width: 767px){ .animation-hover-box{ width: 100%; padding-bottom: 35px; } } </style>

In this animation,

I have added a “social icon”, and “name box” at the bottom, and a “background” color on the box hover.

and I have rotated the icon background on the icon hover.

by default, I set rotate(0deg) icon background and changed it to rotate(180deg ) on hover.

and on hover, I changed the icon background color.

Review the below video.

 

 

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories