이미지에 마우스를 오버했을 경우 텍스트 문구가 보여지는 효과를 주는 예제를 알아 보도록 하겠습니다.
전체소스
<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 |
HTML/CSS 이미지효과 - 마우스 오버시에 텍스트 보이기 예제소스 (6) | 2018.08.01 |
체크박스 클릭 시 해당 테이블 줄 배경색 변경하기 (6) | 2018.07.25 |
[HTML/CSS] DIV 중앙, 가운데 배치하기 (6) | 2018.07.01 |
[JavaScript] 펼쳐지는 세로 트리메뉴 쉽게 만들기 (3) | 2018.06.25 |
잘 보고 갑니다
티스토리를 잘 운영하려면
HTML의 기초는 배워야 할 것 같아요.. ^^
답글
이거는 쉽게 할수있겠네요~ ㅎㅎ
토요일 저녁 시원하게 보내세요~~ ^^
답글
누구에게 사과하고 싶을 때
이 이미지를 보여주면 좋겠네요.
마우스를 올려보라 하고
밑에 '이것은 사과입니다.' 대신 진심 어린 짧은 사과글을 보여주면 좋을 듯해요.
답글
아하!
워드프레스에서 슬라이드바 같은 기능이네요!
이런 프로그램 언어 정보 너무 감사합니다.^^
답글
무더운 한주 시작 입니다
좋은 시작 하시고 포스팅 잘 보고 갑니다~
답글
좋은 정보 감사합니다.
답글