Javascript 如何创建一个CSS转换，其中图像的比例超出缩略图？

我想创建一个类似于上一个的过渡。点击转到谷歌照片。如果你点击一张照片，你会看到照片从它的当前容器（缩略图）过渡到中心，屏幕的背面变黑。当我们关闭预览时，照片将转换回缩略图容器。如何使用CSS和Jquery实现这种转换？我尝试在CSS中这样做，但我只能让照片从页面中心过渡到向用户显示其全屏，而不是从照片缩略图所在的位置

以下是我目前掌握的情况：

@keyframes fadeInScale {
    0%{
        opacity:0;
        transform: scale(0.5);
    }
    100%{
        opacity:1;
        transform: scale(1);
    }
}

@keyframes fadeOutScale {
    0%{
        opacity:1;
        transform: scale(1);
    }
    100%{
        opacity:0;
        transform: scale(0.5);
    }
}

.overlay {
    position: fixed;
    width: 100%;
    top: 100%;
    left: 0px;
    height: 0;
    z-index: 500;
    overflow: auto;
    transition: all 0.4s;

    &.show {
        top: 0px;
        height: 100%;
    }
}


.fade-scale-in {
    display: block;
    animation: fadeInScale 0.3s 1 ease-out;
}

.fade-scale-out {
    display: block;
    animation: fadeOutScale 0.3s 1 ease-out;
}

这是html

当我点击带有图像的div时，我将class

fade scale in

添加到全屏显示图像的覆盖图中。图像以全屏预览覆盖显示。当您退出预览覆盖时，我将类

淡入淡出比例

添加到全屏显示图像的覆盖中，并将类

淡入淡出比例