CSS Animation On Mouse Leave

So I'm trying to do something like tiles or what netflix does. I have a box that I am trying to make grow on mouse hover and reduce in size when the mouse leaves. So Far I have thi

Solution 1:

While there is no equivalent of the mouseleave or mouseout events in CSS, you can achieve the same behaviour by applying the "exit" transition to the selector and then overriding it with the "enter" transition using the :hover pseudo-class, like so:

div{
    background:#000;
    color:#fff;
    font-size:16px;
    line-height:100px;
    text-align:center;
    transition:font-size .5s ease-out,line-height .5s ease-out,width .5s ease-out;
    width:100px;
}
div:hover{
    font-size:20px;
    line-height:125px;
    transition:font-size .25s ease-in,line-height .25s ease-in,width .25s ease-in;
    width:125px;
}
/* HOUSEKEEPING */
*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
body,html{height:100%;}
body{align-items:center;display:flex;justify-content:center;}

<div>Text</div>

Alternatively, if the transition you wish to apply is the same in both cases, only reversed then there is no need to override it in your :hover selector.

Solution 2:

you can simply just use transition for the padding

something like this in your case should do it:

.nav {
        position: relative;
        top: 25%;
        width: 100%;
        color: black;
        text-align: center;
    }
    .nav a {
        color: white;
        text-decoration: none;
    }
    .link {
        font-size: 24px;
        width: 100%;
        height: 25%;
        background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
        display: inline;
        padding-right: 12.5%;
        padding-left: 12.5%;
        padding-bottom: 6.25%;
        padding-top: 6.25%;
        box-shadow: 0px 0px 10px 5px grey;
        transition: padding 0.4s ease-out;
    }
    .link:hover {
        font-size: 32px;
        padding-right: 14.5%;
        padding-left: 14.5%;
        padding-bottom: 8.25%;
        padding-top: 8.25%;
}

The key here is the use of:

transition: padding 0.4s ease-out;