MediaCollectorLibary/public/css/app.css

 .items,
        .item {
        flex-flow: row wrap;
        }
        .items .item,
        .item .item {
        margin: 20px;
        width: 120px;
        height: 180px;
        overflow: hidden;
        box-shadow: 0 5px 10px rgba(0,0,0,0.8);
        transform-origin: center top;
        transform-style: preserve-3d;
        transform: translateZ(0);
        transition: 0.3s;
        }
        .items .item img,
        .item .item img {
        width: 100%;
        min-height: 100%;
        }
        .items .item figcaption,
        .item .item figcaption {
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px;
        padding-bottom: 10px;
        font-size: 20px;
        background: none;
        color: #fff;
        transform: translateY(100%);
        transition: 0.3s;
        }
        .items .item:after,
        .item .item:after {
        content: '';
        z-index: 10;
        width: 200%;
        height: 100%;
        top: -90%;
        left: -20px;
        opacity: 0.1;
        transform: rotate(45deg);
        background: linear-gradient(to top, transparent, #fff 15%, rgba(255,255,255,0.5));
        transition: 0.3s;
        }
        .items .item:hover,
        .item .item:hover,
        .items .item:focus,
        .item .item:focus,
        .items .item:active,
        .item .item:active {
        box-shadow: 0 8px 16px 3px rgba(0,0,0,0.6);
        transform: translateY(-3px) scale(1.05) rotateX(15deg);
        }
        .items .item:hover figcaption,
        .item .item:hover figcaption,
        .items .item:focus figcaption,
        .item .item:focus figcaption,
        .items .item:active figcaption,
        .item .item:active figcaption {
        transform: none;
        }
        .items .item:hover:after,
        .item .item:hover:after,
        .items .item:focus:after,
        .item .item:focus:after,
        .items .item:active:after,
        .item .item:active:after {
        transform: rotate(25deg);
        top: -40%;
        opacity: 0.15;
        }
        .item .article {
        overflow: hidden;
        width: 350px;
        height: 235px;
        margin: 20px;
        }
        .item .article img {
        width: 100%;
        min-height: 100%;
        transition: 0.2s;
        }
        .item .article figcaption {
        font-size: 14px;
        text-shadow: 0 1px 0 rgba(51,51,51,0.3);
        color: #fff;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 40px;
        box-shadow: 0 0 2px rgba(0,0,0,0.2);
        background: rgba(6,18,53,0.6);
        opacity: 0;
        transform: scale(1.15);
        transition: 0.2s;
        }
        .item .article figcaption h3 {
        color: #3792e3;
        font-size: 16px;
        margin-bottom: 0;
        font-weight: bold;
        }
        .item .article:hover img,
        .item .article:focus img,
        .item .article:active img {
        filter: blur(3px);
        transform: scale(0.97);
        }
        .item .article:hover figcaption,
        .item .article:focus figcaption,
        .item .article:active figcaption {
        opacity: 1;
        transform: none;
        }