body{
    background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

main{
    display: flex;
    gap: 20px;
    height: 100vh;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

article{
    position: relative;
    width: 250px;
    transition: all .3s ease;
}

article img:first-child{
    box-shadow: 0 70px 70px -70px rgba(0, 30, 255, .5);
    border-radius: 4px;
    object-fit: cover;
    width: 100%;
    border: groove 5px #000;
}

article img:last-child{
    position: absolute;
    width: 200px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: translateY(25%);
    transition: .3s ease;
    opacity: 0;
}

article:hover{
    transform: perspective(250px) rotateX(10deg) translateY(-5%) translateZ(0);
}

article::before{
    content: '';
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0) 95%);
    opacity: 0;
    transition: all .3s ease;
}

article:hover::before{
    opacity: 1;
}

article:hover img:last-child{
    opacity: 1;
    transform: translateY(10%);
    pointer-events: none;
}