마우스를 올리면 사진이 위로 오면서 기울어지도록
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{box-sizing: border-box;}
div{border: 1px solid black;}
.wrapper{
margin: auto;
position: relative;
}
.box{
width:300px;
height: 200px;
position: absolute;
padding: 5px;
background-color: white;
}
.box1{
top: 270px;
left: 350px;
}
.box2{
top: 150px;
left: 200px;
z-index: 1;
}
.box3{
top: 100px;
left: 400px;
z-index: 2;
}
.box:hover{
z-index: 3;
transform: scale(1.1,1.1) rotate(10deg);
}
.cat{
width:100%;
height: 100%;
border: 1px solid black;
}
.txt{
background-color: white;
text-align: center;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1">
<img src="cat1.jpg" class="cat cat1">
</div>
<div class="box box2">
<img src="cat2.jpg" class="cat cat2">
</div>
<div class="box box3">
<img src="cat3.jpg" class="cat cat3">
</div>
</div>
</body>
</html>
'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글
| [CSS] hover (0) | 2020.04.07 |
|---|---|
| [CSS] 예제 - 사이드바 트리거 (0) | 2020.04.07 |
| [CSS] 수직 정렬 - transform:translate() (0) | 2020.04.07 |
| [CSS] Transform (0) | 2020.04.07 |
| [CSS] 예제 (z-index , position) - 겹친사진, 사이드바 (0) | 2020.04.07 |