# html 이미지 hover 효과
마우스를 올렸을 때 수정 마크가 뜨게 하고싶은데 어떻게 해야할까요?
haesamq님의 답변
## 이미지 겹치기 효과
아래 레퍼런스를 참고해보세요.
## 레퍼런스
+ Image Overlay Face (https://goo.gl/j7IKdp)
sehongpark님의 답변
## html 구성
```
<div class="overlay-container">
<img src="something.jpg" />
<div class="overlay-contents">Edit</div>
</div>
```
## scss 구성
```
.overlay-container {
position: relative;
img {
transition: .5s ease;
}
.overlay-contents {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
}
```
sehongpark님의 답변
## jQuery 이벤트 발생시키기
`trigger()`
```
$('#avatar-upload-btn').click(function() {
$('user_avatar').trigger('click');
});
```
sehongpark님의 답변
## paperclip default image
이미지 카테고리별 셋팅
## 레퍼런스
+ https://github.com/thoughtbot/paperclip/wiki/Interpolations