인스타그램처럼 포스팅 한 게시물에 마우스 올리면 좋아요 개수, 댓글 개수를 알려주고 싶었다.
찾아보니 CSS 로 instagram 처럼 mouseover 시 event effect 를 적용 할 수 있어서 바로 적용함.
참고 : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity
* 사용방법 *
1. HTML <body> 태그
<article class="${board.boardNo}">
<!-- 썸네일 형식의 작성한 글 이미지 -->
<div class="thumbImg" style="width:auto; height:250px;">
<img src="/images/board/posts/${board.boardImg}" class="img-thumbnail">
</div>
<!-- 마우스 오버시 보여지는 부분 -->
<div class="links" style="text-align:center;">
${board.boardTitle}<br>
<img src="/images/board/like_white.png" class="icon"> ${board.likeCnt}
<img src="/images/board/comment_white.png" class="icon"> ${board.commCnt}
</div>
</article>2. HTML CSS 부분
article{
display: inline-block;
position: relative;
}
article:hover .thumbImg img {
opacity: 0.3;
}
article:hover .links {
opacity: 1;
}
.thumbImg img{
width: 250px;
height: 250px;
opacity: 1;
transition: .5s ease;
}
.icon{
width: 15px;
height: 15px;
}
.links {
opacity: 0;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transition: .5s ease;
}
반응형
'Frontend > CSS' 카테고리의 다른 글
| textarea 선택 영역 파란테두리 없애는 방법 (0) | 2018.07.16 |
|---|---|
| position 활용하여 더보기 버튼 클릭하면 더보기 메뉴 뜨게 만들기 (0) | 2018.07.12 |
| @media와 flex 활용하여 화면 줄였을 때 보여지는 정렬순서 바꾸기 (0) | 2018.07.12 |
| CSS의 flex활용하여 인스타그램, 페이스북처럼 유저정보 만들기 (0) | 2018.07.12 |
| CSS 처음 접할때 공부하기 좋은 사이트 (0) | 2018.07.02 |
댓글