AnimatorPro Docs

We are using this template in this article, download it or simply use your own

The hover interactions it not the same anymore!, this will take your animations to the next level!.

Section number seven which is title is Centered Title we have three images, we want to add elements to this image to appear on the top of the image (overlay), let’s start !.

First add a class to the link and call it .img-overlay-container and add a new div inside that link and let’s give it a class .img-overlay, inside img-overlay div add three icons <i class="fa fa-play"></i>, <i class="fa fa-heart"></i> and <i class="fa fa-reorder"></i>, also add h3 inside the same div <h3>Hi There ! ;)</h3>

Code

<a href="#" class="thumbnail img-overlay-container">
  <div class="img-overlay">
    <i class="fa fa-play"></i>
    <i class="fa fa-heart"></i>
    <i class="fa fa-reorder"></i>
    <h3>Hi There ! ;)</h3>
  </div>   
  <img src="images/project-1.jpg" alt="">   
</a>

Now let’s add some CSS rules

Code

.img-overlay-container
{
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
}
 
.img-overlay {
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(225, 123, 123, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    padding-top: 100px;
    overflow: hidden;
}
 
.img-overlay > .fa {
    color: white;
    font-size: 50px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
}
 
.img-overlay > h3 {
    color: white;
    font-weight: bold;
    position: absolute;
    width: 100%;
    padding-top: 25px;
    padding-bottom: 25px;
    bottom: -20px;
    background-color: rgba(225, 123, 123, 0.6);
}

Now let’s add animation settings, select the link and go to the ACT panel and click on Animation 1, change the trigger to Hover and the target to > .img-overlay, the grater than sign (>) means that I want to effect an element inside this element (in our case inside the link) and it doesn’t have to be a direct child, under the ANIMATION STEPS section let’s change the Init state to opacity:0;, Step 1 to opacity:1; and under the HOVER OUT section change the Step 1 to opacity:0;

We want to rotate and scale up the icons when the user hover it, so select the link again and click on Animation 2 to create a new animation, set the trigger to Hover, the target to > .fa, change the Init state to transform:rotate(20deg)scale(0.9); and Step 1 to transform:rotate(0)scale(1);, under the HOVER OUT section change the Step 1 to transform:rotate(20deg)scale(0.9);

Save it and test it !.

Finally, we want to animate the h3 to slide up, now you get it !

Trigger: Hover
Target: > h3
ANIMATION STEPS
Init state: transform:translateY(30px);
Step 1: transform:translateY(0px);
HOVER OUT
Step 1: transform:translateY(30px);

Save it and test it again !