溢出：隐藏未显示在：悬停

Question

我正在尝试添加一个带有文本的滑出框。我希望它在用户将光标悬停在图像上之前不可见，但悬停后什么也不会发生。我怎样才能在 :hover 中删除溢出：隐藏？

<li class="portfolio-miniatures-item">
<a class="link link-shadowing" href="index.html">
<div class="app-image">
<img src="./images/bankingapp.jpg" alt="A banking application" width="360">
<p class="app-image-caption">14 Stylish and User-Friendly App Design Concepts · Task Manager App · Calorie Tracker App · Exotic Fruit Ecommerce App · Cloud Storage App</p>
</div>
<div class="portfolio-img-n-desc">
<h2 class="project-title">Banking App Interface Concept</h2>
<p class="goals">App</p>


.app-image {
position: relative;
overflow: hidden;
}

.app-image-caption {
position: absolute;
top: 0;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--color-cloud);
padding: 40px 32px;
background-color: var(--color-iris);
height: 100%;
width: 100%;
transform: translateY(100%);
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.app-image-caption:hover,
.app-image-caption:focus {
transform: translateY(0);
}

它位于我的 github 页面上的“Portfolio”中：

`https://github.com/michallow/goit-markup-hw-05`

`https://michallow.github.io/goit-markup-hw-05/index.html`

我尝试删除“app-image”类中的溢出：隐藏或将其移至其他位置，但没有给出任何令人满意的结果。

Answer 1

我检查了你的网站，无需更改

overflow:hidden

只需添加以下内容即可将鼠标悬停在.app-image上时将标题翻译为0：

.app-image:hover > .app-image-caption,
.app-image:focus > .app-image-caption {
    transform: translate(0);
}

如果有效请告诉我，干杯！