简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

2020-05-28——如何使用CSS在鼠标悬停时缩放图像？

A 枕上人如玉、
Lepaskan： 2020-05-29 11:24:48
asal
257 orang telah melayarinya

图像缩放效果，是当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。在我们要在图像上显示用户详细信息的情况下，这个效果很有用。
有两种方法可以创建鼠标悬停效果。

使用JavaScript

使用CSS

在本文中，我们将看到如何使用CSS来实现这种效果。本文包含两部分代码。第一部分包含HTML代码，第二部分包含CSS代码。HTML代码：在本文中，我们将使用HTML创建悬停效果时图像缩放的基本结构。

                    How to Zoom an Image on        Mouse Hover using CSS?        

        Geeks Image    


CSS代码：在本节中，我们将使用一些CSS属性在鼠标悬停时缩放图像。要创建缩放效果，我们将使用transition和transform这两个属性。

完整代码：在本文中，我们将结合以上两个部分，使用HTML和CSS在鼠标悬停时创建图像缩放效果。例：

               How to Zoom an Image on   Mouse Hover using CSS?              

        Geeks Image    

Atas ialah kandungan terperinci 2020-05-28——如何使用CSS在鼠标悬停时缩放图像？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
1
sumber：php.cn
Artikel sebelumnya：2020-05-28——如何使用CSS在页面加载时创建淡入效果？ Artikel seterusnya：CSS display: contents 如何使用？
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
SQL Count() juga memerlukan 0 Saya hanya mempunyai satu jadual dan saya ingin mengira setiap entri tag yang bermula deng...
daripada 2024-04-06 19:48:53
0
1
449
MySQL: "Pilih teks daripada... sebagai <variable here or subquery>" Saya mempunyai jadual berikut dengan data berikut: id text language 1 german text german 2...
daripada 2024-04-06 19:25:54
0
2
529
Bagaimana untuk mendapatkan nama pertama daripada lajur nama_pelanggan selectsubstring(custommer_name,1,instr(custmer_name,''))asfirst_namefromsales.penyelesaian...
daripada 2024-04-06 17:43:30
0
2
433
untuk gelung secara rawak pergi dari 1 hingga 0 Pada asasnya, setiap kali halaman dimuat semula, gelung for berpotensi berubah daripada 1 ...
daripada 2024-04-06 16:48:14
0
1
393
Tunjukkan panel sisi tersembunyi: ditandai Saya ingin mempunyai menu navigasi dalam panel sisi dengan keupayaan untuk beralih kepada ...
daripada 2024-04-06 15:49:33
0
1
319
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！