.he-style3 .he-box{
    border:10px solid whitesmoke;
    box-shadow: 0 0 5px grey;
    overflow: hidden;
    position: relative;
}
.he-style3 .he-box .box-img img{
    width:100%;
    height: auto;
    transform:scale(1,1);
    transition:transform 0.50s linear;
}
.he-style3 .he-box:hover .box-img img{
    transform:scale(1.1,1.1);
}
.he-style3 .he-box .he-content{
    background:rgba(255,255,255,0.8);
    border:1px solid #bebbbb;
    width: 100%;
    height: 100%;
    padding:35px 25px;
    position: absolute;
    top: 0;
    text-align:center;
    opacity:0;
    transition:opacity 0.30s linear,border 0.20s ease-in-out;
}
.he-style3 .he-box:hover .he-content{
    opacity:1;
    border:8px solid  #bebbbb;
}
.he-style3 .he-box .he-title{
    font-size: 18px;
    margin: 0;
    position: relative;
    text-transform: uppercase;
    top: -2px;
    transition: top 0.50s ease 0s,opacity 0.10s ease-in-out 0s;
}
.he-style3 .he-box .he-title:after{
    content: "";
    border-bottom: 2px solid #747474;
    position: absolute;
    top: 25px;
    left: 34%;
    border-radius:2px;
    width:30%;
    transform:rotateX(-180deg);
    transition:width 1s ease-out 0s, transform  1s ease-in-out 0s,opacity 1s ease-out 0s;
}
.he-style3 .he-box:hover .he-title:after{
    transform:rotate(180deg);
    transition-delay:0.3s;
}
.he-style3 .he-box:hover .he-title{
    top:45%;
}
.he-style3 .he-box .he-links{
    position: absolute;
    bottom: -110%;
    left: 40%;
    width: 100%;
    margin: 0;
    padding: 0;
    transition: bottom 0.30s ease,opacity 0.30s ease;
}
.he-style3 .he-box .he-links li{
    display:inline-block;
    list-style: none;
    margin-right:20px;
}
.he-style3 .he-box:hover .he-links{
    top: 70%;
}
.he-style3 .he-box .he-links li a{
    font-size: 17px;
    color: #333;
}
.he-style3 .he-box .he-links li a:hover{
    color:#e74c3c;
}
@media only screen and (max-width: 990px) {
    .he-style3 .he-box{
        margin-bottom:20px;
    }
}