html - CSS div 使用 'position absolute' 隐藏内容

Question

我正在尝试使用以下设置让 Angular 按钮在悬停时显示新内容:

<div class="panel panel-default1">
    <div class="panel-body">
        <div class='amg-corner-button_wrap'>            
            <div class="overlay"></div>
            <div class="overlay-content">
                <h2>Image Ink Logo</h2>
                <p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p>
            </div>
        </div> <!-- wrap -->
    </div> <!-- panel body -->
</div> <!-- panel default -->

CSS:

.panel-default1 {
    padding-top: 10px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
    height: 400px;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

.amg-corner-button_wrap {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
}

.amg-corner-button_wrap .overlay {
    border-bottom: 40px solid #e8c63d;
    border-left: 40px solid transparent;
    bottom: 0;
    height: 0;
    opacity: .95;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    width: 0;
}

.amg-corner-button_wrap:hover .overlay {
    border-bottom: 800px solid #e8c63d;
    border-left: 800px solid transparent;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.amg-corner-button_wrap .overlay-content {
    bottom: 0;
    color: #333;
    left: 0;
    opacity: 0;
    padding: 30px;
    position: absolute;
    right: 0;
    top: 0;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.amg-corner-button_wrap .overlay-content h2 {
    border-bottom: 1px solid #333;
    padding: 0 0 12px;
}
.amg-corner-button_wrap:hover .overlay-content {
    opacity: 1;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

这是 fiddle :https://jsfiddle.net/ar3jkuvq/

悬停部署运行良好，但如果 .amg-corner-button_wrap 使用 position: absolute，则 .overlay-content 文本不会显示>。但是，我需要它来仅将鼠标悬停在包装上。

如何让悬停效果只在换行的同时显示文字内容？

Answer 1

您可以使用 CSS3 transform 属性来缩放叠加层而不是使用边框，然后使用 General sibbling combinator [ w3 ] 选择器 ~ 选择前面有 .amg-corner-button_wrap:hover 的 .overlay-content 元素。

Working fiddle