- transition
- opacity
1) transition + opacity
<style>
.box {
margin: 50px;
width: 600px;
height: 400px;
position: relative;
cursor: pointer;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: all 1s ease-in-out;
}
.box:hover img:last-child {
opacity: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="images/cat0.jpg" alt="">
<img src="images/cat1.jpg" alt="">
</div>
</body>
사진 두 장을 img로 불러오고 absolute를 사용해 겹친 다음 첫 번째 사진에만 효과를 주었다.
1초 동안 ease-in-out 방식으로 opacity: 0 을 주어 사라지게 했다.
<style>
.box {
margin: 50px;
width: 600px;
height: 400px;
position: relative;
cursor: pointer;
overflow: hidden;
}
.box img {
position: absolute;
left: 0;
top: 0;
transition: all 1s ease-in-out;
}
.box:hover img:last-child {
transform:translateX(600px);
}
</style>
</head>
<body>
<div class="box">
<img src="images/cat0.jpg" alt="">
<img src="images/cat1.jpg" alt="">
</div>
</body>이번엔 사라지지 않고 translateX를 사용해 x축 방향으로 +600px만큼 이동하게 해 보았다.
부모에 overflow:hidden을 넣어 첫 번째 사진이 이동을 하면 자연스럽게 숨겨지도록 했다.
<style>
.box {
width: 600px;
height: 400px;
margin: 50px;
overflow: hidden;
}
.box:hover img {
transform: rotate(15deg) scale(1.3);
}
.box img {
transition: all 1s ease-in-out;
}
</style>사진을 한 장만 불러오고 scale을 사용해 크기가 130%가 됨과 동시에 15deg만큼 회전하게 했다.
마찬가지로 회전하면서 부모의 크기를 넘는 부분은 hidden을 사용해 숨김처리 하였다.
