如何制作图像的薄切片，从一个部分的顶部到该部分的底部？

Question

我想尝试做以下事情：

以下是我的以下代码：

＆＃13;

＆＃13;

.section-projects {
    padding: 0;
    margin:0;
}

.project-showcase li {
    padding:0;
    margin:0;
    display: block;
    float:left;
    width:50%
}

.project-photo {
    background-color: #000;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.project-photo img {
    
    opacity: 0.7;
    width: 100%;
    height:auto;
    transform: scale(1.15);
    transition: transform 0.5s, opacity 0.5s;
}

.project-photo img:hover {
    transform: scale(1.03);
    opacity: 1;
}

＆＃13;

<section class="section-projects">
            <ul class="project-showcase">
                <li>
                    <figure class="project-photo">
                        <a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a>
                    </figure>
                </li>
                <li>
                    <figure class="project-photo">
                        <a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a>
                    </figure>
                </li>
            </ul>
        </section>

＆＃13;

＆＃13;

＆＃13;

我已经达到了我想要的效果，但是如何裁剪图像以使它们显示为薄片而不是占据整个屏幕？我似乎无法弄清楚如何做到这一点。

此外，如何在这些图像上添加文字？