游標移入圖片放大-我是一個金艾吉

游標移入圖片放大

游標移入時，圖片放大並且轉個10度

重點：

transform: scale(1.5) rotate(10deg);

效果演示：

HTML：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>滑過圖片說明文字向內彈出來</title>
    <link rel="stylesheet" href="style.css">
</head>
<body id="dailycss_20210723">
    <div class="container">
        <div class="imageBox">
            <img src="https://i.imgur.com/7wr6IEa.png" alt="紫龍初始化聖衣">
        </div>
        <div class="content">
            <h1>要在就要大幅紛紛同樣</h1>
            <p>
                魯蛇地區網絡允許我來腦袋幾個主角廣場寂寞監控，刪除訓練，隱藏資金一方面，有效廣場。
            </p>
        </div>
    </div>
</body>
</html>

CSS：

#dailycss_20210724 {
    margin: 0;
    padding: 0;
    background: #1c363e;
}

#dailycss_20210724 .container {
    width: 560px;
    height: 315px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    overflow: hidden;
}

#dailycss_20210724 .container img {
    width: 100%;
    transition: .5s all ease-in-out;
}

#dailycss_20210724 .container:hover img {
    transform: scale(1.5) rotate(10deg);
}

來源：