Problem with Hover

Question

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, however, I had a problem with the.

What should happen is: you hover over the image and your description appears.

The problem is that even with the mouse on top of the list item, the description goes away.

Here is the code: https://jsfiddle.net/o6sv6cec/

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%;}
}

Answer 1

In your class CSS .item-works:hover .sub-works you can use -webkit-animation-fill-mode: forwards; to persist the final state.

.item-works:hover .sub-works {
    animation-name: hoverwork;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
}