#pills-five .portbox,
#pills-one .portbox {
    -webkit-transition: .4s;
    -o-transition: .4s;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0)
}

.portbox, #pills-five .portbox, #pills-six .portbox {
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden
}

.portfolio {
    background: url("https://www.visionarywebdesigns.co.uk/assets/images/home-pricing-section.jpg")
}

#port-tab {
    margin: 10px 0 50px;
    padding: 0
}

.grid-row {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 320px));
    grid-gap: 15px 15px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.port-item {
    overflow: hidden!important;
    position: relative;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.port-item:hover .overlay {
    width: 100%;
}

.portbox {
    transition: .4s;
    height: 500px;
    transform: rotate(0);
}

#pills-five .portbox {
    transition: .4s;
    height: 320px;
    transform: rotate(0);
}

#pills-six .portbox {
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    height: 225px;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

.portbox img {
    height: auto;
    width: 100%;
    position: relative;
    top: 0;
    -webkit-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
    display: block;
    max-width: 100%;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    visibility: visible;
    opacity: 1;
}

.portbox:hover>img {
    translate: 0 -600px;
}
#pills-five .portbox:hover>img,#pills-six .portbox:hover>img{
    translate: none;
}
.portbox .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: -webkit-gradient(linear, left top, right top, from(#5176ca57), to(#905ffb5e));
    background: -o-linear-gradient(left, #5176ca57 0, #905ffb5e 100%);
    background: linear-gradient(to right, #5176ca57 0, #905ffb5e 100%);
    overflow: hidden;
    width: 0;
    height: 97%;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    top: 0
}

.portbox .overlay .text {
    color: #fff;
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap
}