Overflow: hidden not showing on :hover

Question

I am trying to add a slide-out box with text. I want it to be invisible until the user hovers the cursor over the image but after hovering nothing happens. How can I in :hover remove overflow: hidden?

HTML

<ul class="portfolio-miniatures">
<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>
</div>
</a>
</li>
</ul>

CSS

.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);
}

It's in "Portfolio" on my github page:

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

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

I tried to remove overflow: hidden from the "app-image" class or move it somewhere else but it didn't give any satisfactory results.

Answer 1

I checked your website, no need to change overflow:hidden just add the following to affect the caption translate to 0 when you hover the .app-image:

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

Let me know if it works,cheers!