游標移入圖片放大

游標移入圖片放大

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

重點:

  1. 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);
}

 

來源:




 迴響列表

目前還沒有任何留言


 留言表單

如果想要使用回覆功能,或是刪除修改自己的留言,可以登入網站後再來留言。

🧨 Method Illuminate\View\View::__toString() must not throw an exception, caught ParseError: syntax error, unexpected 'array' (T_ARRAY), expecting function (T_FUNCTION) or const (T_CONST)