How To Create Up And Down Animation On Hover

In this topic,

We are going to see how to create up-and-down 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-01.jpg" alt="face-one" height="300" width="300">
              </div>
              <div class="animation-hide-col">
                <div class="hide-button-col">
                  <span><a href="#"><i class="fab fa-facebook-f"></i></i></a></span>
                  <span><a href="#"><i class="fab fa-twitter"></i></a></span>
                  <span><a href="#"><i class="fab fa-linkedin-in"></i></a></span>
                  <span><a href="#"><i class="fab fa-instagram"></i></a></span>
                </div>
              </div>
            </div>
            <div class="animation-hover-box-content">
              <div class="name-with-occupation">
                <span class="name-text">Williamson</span> <span class="hover-divider"> | </span> <span class="occupation-text"> Web Devloper</span>
              </div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<p>
              <a href="#">Read More</a>
            </div>
          </div>
          <div class="animation-hover-box">
            <div class="animation-hover-box-image-col">
              <div class="animation-hover-box-image">
                <img src="image/face-01.jpg" alt="face-one" height="300" width="300">
              </div>
              <div class="animation-hide-col">
                <div class="hide-button-col">
                  <span><a href="#"><i class="fab fa-facebook-f"></i></i></a></span>
                  <span><a href="#"><i class="fab fa-twitter"></i></a></span>
                  <span><a href="#"><i class="fab fa-linkedin-in"></i></a></span>
                  <span><a href="#"><i class="fab fa-instagram"></i></a></span>
                </div>
              </div>
            </div>
            <div class="animation-hover-box-content">
              <div class="name-with-occupation">
                <span class="name-text">Williamson</span> <span class="hover-divider"> | </span> <span class="occupation-text"> Web Desginer</span>
              </div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<p>
              <a href="#">Read More</a>
            </div>
          </div>
          <div class="animation-hover-box">
            <div class="animation-hover-box-image-col">
              <div class="animation-hover-box-image">
                <img src="image/face-01.jpg" alt="face-one" height="300" width="300">
              </div>
              <div class="animation-hide-col">
                <div class="hide-button-col">
                  <span><a href="#"><i class="fab fa-facebook-f"></i></i></a></span>
                  <span><a href="#"><i class="fab fa-twitter"></i></a></span>
                  <span><a href="#"><i class="fab fa-linkedin-in"></i></a></span>
                  <span><a href="#"><i class="fab fa-instagram"></i></a></span>
                </div>
              </div>
            </div>
            <div class="animation-hover-box-content">
              <div class="name-with-occupation">
                <span class="name-text">Williamson</span> <span class="hover-divider"> | </span> <span class="occupation-text"> Web Devloper</span>
              </div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<p>
              <a href="#">Read More</a>
            </div>
          </div>
          <div class="animation-hover-box">
            <div class="animation-hover-box-image-col">
              <div class="animation-hover-box-image">
                <img src="image/face-01.jpg" alt="face-one" height="300" width="300">
              </div>
              <div class="animation-hide-col">
                <div class="hide-button-col">
                  <span><a href="#"><i class="fab fa-facebook-f"></i></i></a></span>
                  <span><a href="#"><i class="fab fa-twitter"></i></a></span>
                  <span><a href="#"><i class="fab fa-linkedin-in"></i></a></span>
                  <span><a href="#"><i class="fab fa-instagram"></i></a></span>
                </div>
              </div>
            </div>
            <div class="animation-hover-box-content">
              <div class="name-with-occupation">
                <span class="name-text">Williamson</span> <span class="hover-divider"> | </span> <span class="occupation-text"> Web Desginer</span>
              </div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<p>
              <a href="#">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

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

body{
    margin: 0;
}
.container{
    max-width: 1140px;
    margin: 0 auto;
}
.hover-section-col{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.animation-hover-box{
    width: 25%;
}
.animation-hover-box-image img{
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.animation-hover-box-image {
    height: 260px;
    border-radius: 50%;
    overflow: hidden;
    line-height: 260px;
    position: relative;
}
.animation-hover-box-image:after{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #42404099;
    border-radius: 50%;
    transition: all 1s ease 0.5s;
}
.main-hover-section {
    background-color: #141718ee;
    padding: 50px 15px;
}
.animation-hover-box {
    width: 23%;
    text-align: center;
}
.animation-hover-box-content {
    color: #fff;
    font-family: system-ui;
    padding-top: 20px;
}
span.name-text {
    font-weight: 600;
    font-size: 18px;
}
span.hover-divider {
    color: #a9d7d1;
    padding: 0px 8px;
}
span.occupation-text {
    font-size: 14px;
    color: #adadad;
}
a {
    color: #a9d7d1;
    text-decoration: none;
    font-style: italic;
}
.hide-button-col{
    display: flex;
    justify-content: center;
    z-index: 99;
    transition: all 0.5s ease-in 0.5s;
}
.hide-button-col span {
    width: 33px;
    height: 33px;
    background: #4a4a4a;
    margin: 0px 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease 0s;
  
}
.hide-button-col span:hover {
    background: #a9d7d1;
}
.hide-button-col span:hover a{
    color: #ddd;
}
.animation-hover-box-image-col {
    position: relative;
}
.animation-hide-col {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    transition:  all 0.5s ease 0s;
    visibility: hidden;
}
.animation-hover-box:hover .animation-hide-col{
    visibility: visible;
}
.animation-hover-box:hover .animation-hover-box-image:after{
    height: 100%;
}
@media only screen and (max-width: 991px){
  .animation-hover-box{
     width: 45%;
  }
}
@media only screen and (max-width: 767px){
  .animation-hover-box{
     width: 100%;
     padding-bottom: 25px;
  }
}

In this animation,

I took a black background in the image box “:after”.

And set by default 0% height. and I have increased the height from 0% to 100% on hover. 

Review the below video.

Submit a Comment

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

Subscribe

Select Categories