랜딩 페이지 애니메이션

그림 하나에만 애니메이션 효과를 넣고 싶은데 어디를 수정해야 할 지 모르겠습니다.

<section class="container">
<h4 style="font-size: 25px; margin-bottom: 50px;"> What we can DO</h4>
<div style="max-width: 1200px; margin: 50px; display: flex; flex-wrap: wrap;">
<div class="overlay"></div>
<div class="portfolio-item1">
<div class="portfolio-text">
<h4>Stationary</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit!</p>
</div>
</div>

<div class="portfolio-item1">
<div class="portfolio-text">
<h4>Stationary</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit!</p>
</div>
</div>

<div class="portfolio-item1">
<div class="portfolio-text">
<h4>Stationary</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit!</p>
</div>
</div>

<div class="portfolio-item1">
<div class="portfolio-text">
<h4>Stationary</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit!</p>
</div>
</div>

</div>
 
</section>

------------css-----------------

.container {
padding-top: 60px; padding-bottom: 60px; text-align: center; position: relative;
}
.portfolio-item1 {
background-image: url(/portfolio-1.jpg); 
width: 50%; height: 350px;
text-align: left;
background-size: cover;
}
.portfolio-text {
color: white;
padding: 50px;
width: 100%;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border: 0px solid white;
}
.overlay:hover {
border: 30px solid white;
}