• 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을 사용해 숨김처리 하였다.

 

티스토리툴바