project.css

.imgbx img{
    width:200px;
    height:265px;
}
body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}
.container{
    position:relative;
    width:1100px;
    display:flex;
    transform-style:preserve-3d;
    perspective:500px;
}
.container .box{
    position:relative;
    width:275px;
    height:275px;
    background:black;
    transition:0.5s;
    transform-style:preserve-3d;
    overflow:hidden;
}
.container:hover .box{
    transform:rotateY(25deg);
}
.container .box:hover ~ .box{
    transform:rotateY(-25deg);
}
.container .box:hover{
    transform:rotateY(0deg)scale(1.25);
    box-shadow:0 25px 40px rgba(0,0,0);
}
.container .box .imgbx{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
 .imgbx:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(180deg,#f00,#000);
    z-index:1;
    opacity:0;
    transition:0.5s;
    mix-blend-mode:multiply;
}
.container .box:hover .imgbx:before{
    opacity:1;
}
.container .box .imgbx img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.container .box .content{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    display:flex;
    padding:20px;
    align-items:flex-end;
    box-sizing:border-box;
}
.container .box .content h2{
    color:#fff;
    transition:0.5s;
    text-transform:uppercase;
    font-size:20px;
    transform:translateY(-200px);
    margin-bottom:5px;
}
.container .box:hover .content h2{
    transform:translateY(0);
    transition-delay:0.6s;


}
.container .box:hover .content p{
    transform:translateY(0);
    transition-delay:0.6s;

}
.container .box .content p{
    color:#fff;
    transition:0.5s;
    font-size:20px;
    transform:translateY(200px);
}