溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用純CSS3創建鼠標懸停圖片時圖像放大效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用純CSS3創建鼠標懸停圖片時圖像放大效果”吧！
鼠標懸停圖片放大特效是一個非常有用且吸引眼球的特效，可以給網頁添加互動性，當用戶懸停鼠標在圖片上，圖片會稍微的放大。適用于圖片展示頁面，可以大大的提升用戶的體驗感！
下面我們就先直接上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.img-wrapper {
width: 220px;
height: 220px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.img-wrapper img {
height: 220px;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}
.img-wrapper img:hover {
transform: scale(1.1);
}
.img-wrapper {
display: inline-block;
box-sizing: border-box;
border: 3px solid #000;
}
/* ==============
* 灰度濾鏡
* ==============*/
.grayscale-img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.grayscale-img:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
/* ==============
* 深褐色濾鏡
* ==============*/
.sepia-img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.sepia-img:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
}
</style>
</head>
<body>
<div class="img-wrapper">
<img src="demo/img/1.jpg"/>
</div>
<!-- 灰度濾鏡 -->
<div class="img-wrapper">
<img class="grayscale-img" src="demo/img/1.jpg"/>
</div>
<!-- 深褐色濾鏡 -->
<div class="img-wrapper">
<img class="sepia-img" src="demo/img/1.jpg"
/>
</div>
</body>
</script>
</body>
</html>效果如下圖所示：
OK，下面來分析一下上面的代碼：
首先創建一個div包裹img標簽，該div容器的作用是：遮擋住圖片，當圖片放大時，不讓圖片超出我們規定的寬高以外。想要讓div實現這個作用，就需要一個關鍵樣式overflow: hidden；這樣當圖片放大時，超出部分會被隱藏。
<div class="img-wrapper">
<img src="demo/img/1.jpg"/>
</div>
.img-wrapper {
width: 220px;
height: 220px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}然后就是實現圖片放大效果了，我這里使用的是transform: scale(1,1)樣式。transform屬性可以向元素應用 2D 或 3D 轉換，而scale是用于放大（整數就會放大）或者縮小（負數就會縮小）元素的。
.img-wrapper img {
height: 220px;
}
.img-wrapper img:hover {
transform: scale(1.1);
}
這樣實現的圖片放大效果是突兀的，鼠標懸停就突然放大了，可以使用transition屬性添加一個過渡效果，因為該屬性是css3的一個新屬性，要添加前綴來兼容其他瀏覽器
.img-wrapper img {
height: 220px;
-webkit-transition: 0.3s linear; /* 兼容谷歌瀏覽器 */
transition: 0.3s linear;
}
這樣就實現鼠標懸停圖片放大效果了。但是這樣的放大效果有點單調，我們可以給圖片設置濾鏡屬性filter，來讓圖片放大效果更炫酷！
我們可以先讓圖片變灰（filter: grayscale(100%)）或者變深褐色（filter: sepia(100%)），然后鼠標懸停時，在圖片放大的同時出現顏色變幻（去掉濾鏡效果即可），這樣就會讓特效更炫酷。
<!-- 灰度濾鏡 -->
<div class="img-wrapper">
<img class="grayscale-img" src="demo/img/1.jpg"
/>
</div>
.grayscale-img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.grayscale-img:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
<!-- 深褐色濾鏡 -->
<div class="img-wrapper">
<img
class="sepia-img"
src="demo/img/1.jpg"
/>
</div>
.sepia-img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.sepia-img:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
}
濾鏡屬性filter定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。 可以設置的濾鏡效果： blur(px)：給圖像設置高斯模糊。 brightness(%)：給圖片應用一種線性乘法，使其看起來更亮或更暗。 contrast(%) ：調整圖像的對比度。 drop-shadow(h-shadow v-shadow blur spread color)：給圖像設置一個陰影效果。 grayscale(%)：將圖像轉換為灰度圖像 hue-rotate(deg) ：給圖像應用色相旋轉。 invert(%) ：反轉輸入圖像。 opacity(%)：轉化圖像的透明程度。 saturate(%)： 轉換圖像飽和度。 sepia(%) ： 將圖像轉換為深褐色。
感謝各位的閱讀，以上就是“怎么用純CSS3創建鼠標懸停圖片時圖像放大效果”的內容了，經過本文的學習后，相信大家對怎么用純CSS3創建鼠標懸停圖片時圖像放大效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
