简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

2020-05-28－如何使用CSS在滑鼠懸停時縮放影像？

A 枕上人如玉、
發布： 2020-05-29 11:24:48
原創
256 人瀏覽過

影像縮放效果，是當滑鼠懸停或點擊時對影像進行縮放的一種應用效果。這種影響主要用於網站。在我們想要在圖像上顯示使用者詳細資訊的情況下，這個效果很有用。
有兩種方法可以建立滑鼠懸停效果。

使用JavaScript

使用CSS

在本文中，我們將看到如何使用CSS來實現這種效果。本文包含兩部分程式碼。第一部分包含HTML程式碼，第二部分包含CSS程式碼。 HTML程式碼：在本文中，我們將使用HTML建立懸停效果時圖片縮放的基本結構。

             <； initial-scale=1.0" />            How to Zoom an Image on        Mouse Hover using CSS;      <img src="https: //media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" alt="Geeks Image" />     <gfg/div> </body> </p>CSS程式碼：在本節中，我們將使用一些CSS屬性在滑鼠懸停時縮放圖像。要建立縮放效果，我們將使用transition和transform這兩個屬性。 <p><br><style>     .geeks {         width: 300px;         height: 300p  }</p>    .geeks img {         width: 100%;         transition: 0.5s all ease- in-out;     }<p>    .geeks:hover img {       }<br>    .geeks:hover img {       }<br>    .geeks:hover img {       }</p>    .geeks:hover img {         transform: scale(1.5);     } </style><p></p>113)中，我們將完整程式碼結合兩個以上碼和CSS在滑鼠懸停時創建圖像縮放效果。範例：<p><br><!DOCTYPE html><html><head>    <meta charset="UTF-8" />     <meta name="viewport" content=gt;     <meta name="viewport" content=gt;whoth=devicesdevice width, initial-scale=1.0" />      <title> How to Zoom an Image on   Mouse Hover using CSS?