时间戳

首页 > 解决方案 > 为什么图像覆盖没有显示在引导程序中？

html - 为什么图像覆盖没有显示在引导程序中？

问题描述

我对以下 HTML 代码有疑问。我正在尝试用文本框覆盖图像。但是覆盖不起作用。文本显示在图像下方，而不是悬停时从底部滑入。

<body>
    <div class="row">
        <div class="col-12 col-md-6 mt-2">
            <div class="containerB">
                <img src="images/test.jpg" alt="test image" class="image">
                <div class="overlay">
                    <div class="text">
                        <h6>Headline</h6>
                        <p>Text</p>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

</body>

这就是我为 HTML 设置样式的方式。

.containerB {
    position: relative;
    width: 50%;
 }
  
.image {
    display: block;
    width: 100%;
    height: auto;
}
  
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    opacity: 90%;
    overflow: hidden;
    width: 100%;
    height: 20%;
    transition: .5s ease;
}
  
.container:hover .overlay {
    height: 70%;
}
  
.text {
    color: white;
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
}

标签： htmlcssbootstrap-4

解决方案

推荐阅读