| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
- android
- 스카이 안드로이드폰 시리우스
- 안드로이드 개발
- 아이폰 배경화면
- 하루한마디영어
- 인기있는 블로그 만들기
- objective-c
- 안드로이드개발
- SKY 시리우스
- 안드로이드 배경화면
- Form Stuff
- 스카이 안드로이드폰 시리우스 K양 동영상
- 안드로이드2.0
- 영어
- 안드로이드 개발 강좌
- 안드로이드
- 안드로이드폰
- 스마트폰 배경화면
- 구글 안드로이드
- 구글 안드로이드 개발
- 안드로이드 개발 2.0
- 안드로이드 2.0 개발
- 하루 한마디 영어
- 구글안드로이드
- 안드로이드2.0개발
- 안드로이드 바탕화면
- sky 시리우스폰
- MapView
- 안드로이드 개발 2.0 강좌
- 아이폰 바탕화면
- Today
- Total
moozi
thumbnail.html 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thumbnail</title>
<style>
#box1,#box2,#box3{
width:400px;
height:300px;
position: relative;
overflow: hidden;
}
#box1 img, #box2 img, #box3 img{
width:100%;
height:300px;
opacity: 0.8;
transition: 7s;
}
#box1 div{
position: absolute;
bottom:0;
background: rgba(0,0,0,0.5);
width:100%;
color:#cccccc;
padding-left: 10px;
box-sizing: border-box;
opacity:0;
transition: 0.5s;
}
#box1:hover div{
opacity: 1;
}
#box2 div,#box3 div{
position: absolute;
bottom:0;
background: rgba(0,0,0,0.5);
width:100%;
color:#cccccc;
padding-left: 10px;
box-sizing: border-box;
}
#box2:hover img{
transform: scale(1.2);
opacity: 1;
}
#box3{
width:400px;
height:300px;
background: url(img/pic01.jpg);
background-size: 100% 100%;
/* background-position: center;*/
}
</style>
</head>
<body>
<div id="box1">
<img src="img/pic01.jpg" alt="bmw">
<div>
<h3>BMW</h3>
<p>BMW 2018년 신차 전시회</p>
</div>
</div>
<div id="box2">
<img src="img/pic01.jpg" alt="bmw">
<div>
<h3>BMW</h3>
<p>BMW 2018년 신차 전시회</p>
</div>
</div>
<div id="box3">
<div>
<h3>BMW</h3>
<p>BMW 2018년 신차 전시회</p>
</div>
</div>
</body>
</html>
'TIS_2018 > 응용sw2018_1기' 카테고리의 다른 글
| jsp연습문제01 (0) | 2018.04.17 |
|---|---|
| jQuery연습문제03 (0) | 2018.04.13 |
| 2차 미니프로젝트- 개인 포트폴리오 웹사이트 (14) | 2018.04.12 |
| Ajax03.html (0) | 2018.04.12 |
| ajax연습문제01 (0) | 2018.04.11 |