이미지에 마우스를 오버했을 경우 텍스트 문구가 보여지는 효과를 주는 예제를 알아 보도록 하겠습니다.
전체소스
<!DOCTYPE HTML>
<head>
<title></title>
<style>
.imgBoxDiv{
width: 300px;
height: 300px;
position: relative;
cursor: pointer;
overflow: hidden;
box-shadow: 2px 2px 8px 0px #000;
}
<head>
<title></title>
<style>
.imgBoxDiv{
width: 300px;
height: 300px;
position: relative;
cursor: pointer;
overflow: hidden;
box-shadow: 2px 2px 8px 0px #000;
}
.imgDiv{
width: 100%;
height: 100%;
position: absolute;
background: lightblue;
z-index:1;
-webkit-transition:all .5s ease;
transition: all .5s ease;
bottom:0px;
overflow: hidden;
}
.imgBoxDiv:hover .imgDiv{
bottom: 60px;
}
.imgDescDiv{
width: 100%;
height: 50px;
padding:10px;
color:#FFFFFF;
background: #F2CB61;
position: absolute;
bottom:0px;
}
</style>
</head>
<body>
<div class="imgBoxDiv">
<div class="imgDiv"><img src="img-1.png"></div>
<div class="imgDescDiv">이것은 사과 입니다.<div>
</div>
</body>
</html>
실습 - 예제결과
이미지 위로 마우스를 올렸을 경우 이미지가 올라가며 텍스트 문구가 보여지게 됩니다.
이것은 사과 입니다.
반응형
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
| [JavaScript] 원하는 부분 프린터 하기-print() (2) | 2019.02.01 |
|---|---|
| 자바스크립트 replace 문자 모두 바꾸기 - 예제/실습 (5) | 2018.09.28 |
| 체크박스 클릭 시 해당 테이블 줄 배경색 변경하기 (6) | 2018.07.25 |
| [HTML/CSS] DIV 중앙, 가운데 배치하기 (6) | 2018.07.01 |
| [JavaScript] 펼쳐지는 세로 트리메뉴 쉽게 만들기 (3) | 2018.06.25 |
