body {
    font-family: 'Roboto Slab', serif;
    text-transform: uppercase;
    color:#fff;
}
.box {
    display: inline-block;
    cursor:pointer;
    width: 500px;
    height: 500px;
    position: relative;
}

/* Box1  */
.box1 {
    overflow: hidden;
}
.box1 img {
    transition:1s all ease-in-out;
}
.box1:hover img {
    transform:scale(1.15);
}
.box1::after {
    content:'';
    background:linear-gradient(to bottom right, #dbe6f6, #c5796d);
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    opacity:0;
    transition:.7s all ease-in-out;
}
.box1:hover::after {
    opacity:0.75;
}

/* Box 3 */
.box3 h2 {
    word-spacing:-10px;
    position: absolute;
    top:55%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size: 50px;
    transition:.3s all cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.box3:hover h2 {
    top:25%;
    font-size: 25px;
    word-spacing:-5px;
}
.box3 span {
    font-weight: 100;
}
.box3::before, .box3::after {
    content:'';
    position: absolute;
    width: 90%;
    height: 1px;
    background:rgba(255,255,255,0.5);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transition:.3s all ease-in-out;
}
.box3:hover::before {
    transform:translate(-50%,-50%) rotate(45deg);
}
.box3:hover::after {
    transform:translate(-50%,-50%) rotate(-45deg);
}





div {
    background-image:url(...);
    background-size:;
    background-color:;
}