![[2021/12/30]국비지원 CSS3 10-(3) 과제1 : 갤러리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F985BK%2Fbtrr4QwPetG%2FLXs9L3lhkqRsBY3BE2S2x0%2Fimg.jpg)
갤러리
주제 : perspective
활용 : :hover, opacity, position, z-index
원본
작업내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>갤러리</title>
<style type="text/css">
ul,li{list-style: none;margin:0;padding:0;}
div.gallery{margin: 0 auto;width:460px;height:300px; border:10px solid #1e0d17;
background-color: #28222a;box-shadow: 5px 5px 15px #000;
perspective:600px;}
li{float:left; margin: 20px 10px 15px 20px; display:block;}
li>img.small{width:120px;height:90px;position:relative;z-index:1;}
li>img.pic{width:0px;height:0px;opacity:0.1;border:2px solid #553400;
box-shadow: 0px 2px 5px #000;position:absolute;z-index: 2;
transition: all 2s ease 0s;}
li:hover>img.pic{width:320px;height:240px;opacity:1;transform-origin: left top;}
</style>
</head>
<body>
<div class="gallery">
<ul>
<li>
<img src="갤러리/images/ph1_s.jpg" class="small" alt="작은그림">
<img src="갤러리/images/ph1.jpg" class="pic" alt="큰그림">
</li>
<li>
<img src="갤러리/images/ph2_s.jpg" class="small" alt="작은그림">
<img src="갤러리/images/ph2.jpg" class="pic" alt="큰그림">
</li>
<li>
<img src="갤러리/images/ph3_s.jpg" class="small" alt="작은그림">
<img src="갤러리/images/ph3.jpg" class="pic" alt="큰그림">
</li>
<li>
<img src="갤러리/images/ph4_s.jpg" class="small" alt="작은그림">
<img src="갤러리/images/ph4.jpg" class="pic" alt="큰그림">
</li>
<li>
<img src="갤러리/images/ph5_s.jpg" class="small" alt="작은그림">
<img src="갤러리/images/ph5.jpg" class="pic" alt="큰그림">
</li>
<li>
<img src="갤러리/images/ph6_s.jpg" class="small" alt="작은그림">
<img src="갤러리/images/ph6.jpg" class="pic" alt="큰그림">
</li>
</ul>
</div>
</body>
</html>
결과물