从引导全屏css覆盖和列类遇到麻烦

Question

我正在尝试使用引导程序基于列元素的网格创建画廊。每列都有一个缩略图，当鼠标悬停在其上方时，缩略图会展开并显示一个小的预览。单击按钮应将预览扩展到显示更多信息的全宽度覆盖。目的是用叠加层完全覆盖基于网格的画廊，并专注于新内容。

问题是，尽管我可以弹出叠加层，但是我却无法将其内容放在上面。还有很多不必要的滚动。我只想要一个全宽覆盖层，适合顶部菜单下的大众汽车。我已经尝试过从各个地方上网，但这是我能够独自完成的最大尝试。 html代码是这样的：

<div class="coll-featured row">

    <div class="col-4">
        <div class="coll-featured-thumb">
            <div class="coll-featured-img">
                <img src="img/coll-featured-ednixon.png" />
            </div>
            <span class="coll-featured-caption">E.D. Nixon Collection</span>
            <div class="coll-featured-prev-copy">
                <p>The papers consist of correspondence, minutes, articles, photographs, certificates, video tapes and plaques. These materials document the Montgomery Improvement Association (MIA) and equal rights in Montgomery...</p>
            </div>
            <a class="btn gotocoll" href="index.html">Go To Collection</a>
            <!-- Full Preview Trigger -->
            <a href="#fullScreen" class="button">Preview</a>
        </div>

        <!-- This content goes in the overlay -->
        <div id="fullScreen" class="coll-featured-full">
            <div class="coll-featured-bg">
                <img src="img/coll-featured-ednixon.png" />
            </div>

            <!-- Cancel Button -->
            <a href="#" class="cancel">&times;</a>

            <h2 class="coll-featured-title">E.D. Nixon Collection</h2>
            <ul class="coll-featured-attr">
                <li>Collection Size: 34</li>
                <li>Years: 18?? - 19??</li>
            </ul>
            <div class="coll-featured-copy">
                                    <p>This is a test.</p>

                                    <p>This is more test.</p>
            </div>
            <button class="gotocoll">Go To Collection</button>
            <ul class="related-links">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <!-- Dark Screen Overlay -->
        <div id="cover" ></div>

    </div><!-- ./col-4 -->

</div><!-- ./coll-featured row -->

我一直在玩的css是这样的：

.coll-featured {
    color: #fff;
    margin-top: 2em;
}

.coll-featured-thumb {
    position: relative;
    height: 16em;
    margin-top: 1em;
    transition: all 0.7s ease;
    transform-origin: left top;
    overflow: hidden;
}

.coll-featured-thumb:hover {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    z-index: 1;
}

.coll-featured-img {
    width: 100%;
    height: 16em;
    background-color: #000000;
}

.coll-featured-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.7s ease;
    opacity: 1;
}

.coll-featured-thumb:hover img {
    opacity: 0.5;
}


.coll-featured-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.8);
    font-size: 1.2em;
    font-weight: 100;
    display: block;
    text-transform: uppercase;
    width: 100%;
    padding: 0.2em 0.5em;
    transition: all 0.7s ease;
}

.coll-featured-thumb:hover .coll-featured-caption {
    font-size: 0.9em;
    margin: 1em;
    background: transparent;
    transform: translateY(-8.5em);
}

.coll-featured-prev-copy {
    position: absolute;
    top: 50%;
    left: 0;
    margin-left: 2em;
    margin-right: 2em;
    font-size: 0.7em;
    opacity: 0;
}

.coll-featured-thumb:hover .coll-featured-prev-copy {
    opacity: 1;
}

/* Full Screen Overlay START */


.coll-featured-bg img {
    min-height: 100%;
    width: 100%;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.button {
    width: 80%;
    background-color: #fff;
    font-weight:bold;
    text-decoration:none;
    position: absolute;
    bottom: 1em;
    margin: 0 auto;
    opacity: 0;
    transition: all 3s ease;
}

.coll-featured-thumb:hover .button {
    opacity: 1;
}

#cover {
    position:fixed;
    top:0;
    left:0;
    z-index:10;
  width: 100vw;
  left: calc(-1 * (100vw - 100%) / 2);
    height: 100vw;
    display:none;
}

#fullScreen {
    margin:0 auto;
    position:relative;
    top: 0;
    z-index:5;
    display:none;
}

#fullScreen:target, #fullScreen:target + #cover{
    display:block;
    opacity:2;
}

.cancel {
    display:block;
    position:absolute;
    top:3px;
    right:2px;
    background:rgb(245,245,245);
    color:black;
    height:30px;
    width:35px;
    font-size:30px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    z-index: 1000;
}

/* Full Screen Overlay END */

.gotocoll {
    display: none;
}

.coll-featured-thumb:hover .gotocoll {
    position: absolute;
    top: 2em;
    right: 2em;
    font-size: 0.7em;
    background-color: #a03535;
    color: #fff;
    display: block;
}

我还用完整的代码设置了一个示例页面： Test page

任何帮助，将不胜感激。