I'm starting my studies in html / css so I downloaded a layout to try to develop. I'm in a part of the site that is like a photo gallery, I managed to do exactly what I wanted, but I had a problem with hover.
What should happen is: you hover over the image and its description appears.
The problem is that even with the mouse over the list item, the description disappears.
Here's the code: link
HTML
<section class="works">
<div class="container">
<div class="our-works">
<h2 class="title-section">Our Works</h2>
<ul class="list-works">
<li class="item-works"><img src="image/work1.png" alt="Work" class="img-works">
<div class="sub-works">
<div class="desc-works">
<h2 class="subtitle">Work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</li>
<a class="item-works" href="#">
<img src="image/work1.png" alt="Work" class="img-works">
<div class="sub-works">
<div class="desc-works">
<h2 class="subtitle">Work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</a>
<li class="item-works"><img src="image/work1.png" alt="Work" class="img-works">
<div class="sub-works">
<div class="desc-works">
<h2 class="subtitle">Work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</li>
<li class="item-works"><img src="image/work1.png" alt="Work" class="img-works">
<div class="sub-works">
<div class="desc-works">
<h2 class="subtitle">Work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</li>
<li class="item-works"><img src="image/work1.png" alt="Work" class="img-works">
<div class="sub-works">
<div class="desc-works">
<h2 class="subtitle">Work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</li>
<li class="item-works"><img src="image/work1.png" alt="Work" class="img-works">
<div class="sub-works">
<div class="desc-works">
<h2 class="subtitle">Work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</li>
<li class="item-works"><img src="image/work1.png" alt="Work" class="img-works">
<div class="sub-works">
<div class="desc-works">
<h2 class="subtitle">Work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</li>
<li class="item-works"><img src="image/work1.png" alt="Work" class="img-works">
<div class="sub-works">
<div class="desc-works">
<h2 class="subtitle">Work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
CSS
.item-works {
z-index: 99999;
display: block;
float: left;
width: 24%;
height: 8em;
overflow: hidden;
position: relative;
}
.item-works:hover .sub-works {
display: inherit;
overflow: hidden;
cursor: pointer;
}
.item-works:hover .sub-works {
animation-name: hoverwork;
animation-duration: 1s;
animation-timing-function: ease-in;
}
.sub-works {
display: none;
height: 0%;
position: absolute;
background-color: #00aeff;
top: 0;
color: #fff;
}
.desc-works {
margin-top: 1em;
text-align: center;
}
.desc-works p {
width: 70%;
margin: 0 auto;
}
.img-works {
max-width: 100%;
}
@keyframes hoverwork {
0% {height: 0;}
50% {height: 100%;}
75% {height: 95%}
100% {height: 100%;}
}