Использование кода css в компоненте React mui

Question

Я пытаюсь заставить этот эффект работать с моим материальным компонентом карты пользовательского интерфейса, используя react и makeStyles, и я действительно не знаю, как перевести этот эффект на карты, может ли кто-нибудь помочь мне преобразовать его в простой код css чтобы я мог использовать его в MakeStyles? Я думаю, моя проблема в том, что я не понимаю код на кодовом открытии, если у некоторых из вас есть похожий код и они могут поделиться им, я был бы признателен, спасибо.

https://codepen.io/chrisdothtml/pen/OVmgwK

/* Reset */
@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);

// variables
$anim-speed: 0.3s;

// main styles
.tiles {
    width: 1040px;
    font-size: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    .tile {
        display: inline-block;
        margin: 10px;
        text-align: left;
        opacity: .99;
        overflow: hidden;
        position: relative;
        border-radius: 3px;
        box-shadow: 0 0 20px 0 rgba(0,0,0,.05);
        
        &:before {
            content: '';
            background: linear-gradient(
                to bottom,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,0.7) 100%
            );
            width: 100%;
            height: 50%;
            opacity: 0;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 2;
            transition-property: top, opacity;
            transition-duration: $anim-speed;
        }
        
        img {
            display: block;
            max-width: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        
        .details {
            font-size: 16px;
            padding: 20px;
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 3;
            
            span {
                display: block;
                opacity: 0;
                position: relative;
                top: 100px;
                transition-property: top, opacity;
                transition-duration: $anim-speed;
                transition-delay: 0s;
            }
            
            .title {
                line-height: 1;
                font-weight: 600;
                font-size: 18px;
            }
            
            .info {
                line-height: 1.2;
                margin-top: 5px;
                font-size: 12px;
            }
        }
        
        &:focus,
        &:hover {
            
            &:before,
            span {
                opacity: 1;
            }
            
            &:before {
                top: 50%;
            }
            
            span {
                top: 0;
            }
            
            .title {
                transition-delay: 0.15s;
            }
            
            .info {
                transition-delay: 0.25s;
            }
        }
    }
}

Answer 1

В кодах CSS, которые вы видите на CodePen, используется SCSS. Щелкните значок раскрывающегося списка CSS Редактор -> Просмотреть скомпилированный CSS.

Очевидно, как следует из названия, это покажет вам скомпилированный CSS. :)

введите описание изображения здесь