Can anyone tell me how I do the "reverse" animation when I take the mouse? Try the link below and I think you will understand. When I put the mouse, the description of the image "descends", wanted that when it removed the mouse it "went up"
Can anyone tell me how I do the "reverse" animation when I take the mouse? Try the link below and I think you will understand. When I put the mouse, the description of the image "descends", wanted that when it removed the mouse it "went up"
.our-works {
z-index: 1;
}
.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;
}
.item-works:hover .sub-works {
max-height: 150px;
transition: max-height 0.7s ease;
}
.sub-works {
transition: max-height 0.7s ease;
max-height: 0;
position: absolute;
background-color: #00aeff;
top: 0;
color: #fff;
z-index: 1;
}
.link-foto {
position: absolute;
bottom: 0;
left: 0;
padding: .8em;
text-decoration: none;
color: #fff;
background-color: #008bcc;
font-weight: bolder;
}
.desc-works {
margin-top: 1em;
text-align: center;
}
.desc-works p {
width: 70%;
margin: 0 auto;
}
.img-works {
max-width: 100%;
}
<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>
<a href="#" class="link-foto">+</a>
</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>
<a href="#" class="link-foto">+</a>
</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>
<a href="#" class="link-foto">+</a>
</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>
<a href="#" class="link-foto">+</a>
</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>
<a href="#" class="link-foto">+</a>
</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>
<a href="#" class="link-foto">+</a>
</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>
<a href="#" class="link-foto">+</a>
</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>
<a href="#" class="link-foto">+</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>