마우스 오버 시 그림자 생성

<li class='img_link' style="cursor:pointer;">
<div class="more_box">
 <div class="more_btn">
  <img src="/img/more_button.png">
 </div>
 <img class='main_img' src='#'>
</div>
</li>

 

.img_link{margin-bottom:80px;cursor:pointer;}

.more_box{position:relative;margin:0 auto;width:400px;}
.img_link:hover .more_box .more_btn {opacity:1;}
.more_box .more_btn{opacity:0;position:absolute;left:0;top:0;background:rgba(0,0,0,0.5); transition: opacity 300ms ease-in-out;
width:100%;height:100%;
align-items:center;=webkit-align-items:center;=webkit-justify-content: center;display: flex;text-align: center;}
.more_box .more_btn img{text-align:center;margin:0 auto;width:60px;}
.main_img{vertical-align:middle;}