<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;}
'기타 > 소스' 카테고리의 다른 글
가상서버 계정추가 (0) | 2016.02.25 |
---|---|
구글 jquery (0) | 2016.02.25 |
php 이미지 리사이즈 및 크롭 (0) | 2016.01.30 |
그래프 그리기 (0) | 2016.01.30 |
php mysql 컬럼수 확인 (0) | 2016.01.25 |