鼠标经过图片超链接时改变图片的大小(宽、高)的css

在网页设计中，鼠标经过图片超链接时改变图片的大小是一个常见的效果。这种效果可以通过 CSS 的 :hover 伪类来实现。本文将提供一些关于如何使用 CSS 实现鼠标经过图片超链接时改变图片大小的方法，包括一些常见的 CSS 属性和示例说明。

CSS 属性

1. width 和 height

使用 width 和 height 属性可以改变图片的宽度和高度。在 :hover 伪类中，可以设置不同的宽度和高度，以便实现鼠标经过图片超链接时改变图片大小的效果。

/* 设置图片的初始大小 */
img {
  width: 200px;
  height: 200px;
}

/* 鼠标经过图片时改变图片的大小 */
img:hover {
  width: 300px;
  height: 300px;
}

2. transform

使用 transform 属性可以改变元素的大小、旋转、倾斜等。在 :hover 伪类中，可以设置不同的 transform 属性，以便实现鼠标经过图片超链接时改变图片大小的效果。

/* 设置图片的初始大小 */
img {
  width: 200px;
  height: 200px;
}

/* 鼠标经过图片时改变图片的大小 */
img:hover {
  transform: scale(1.5);
}

示例说明

下面是两个示例，演示如何使用 CSS 实现鼠标经过图片超链接时改变图片大小的效果。

示例一：使用 width 和 height 属性

<a href="#">
  <img src="image.jpg" alt="图片">
</a>

/* 设置图片的初始大小 */
img {
  width: 200px;
  height: 200px;
}

/* 鼠标经过图片时改变图片的大小 */
img:hover {
  width: 300px;
  height: 300px;
}

上述代码中，使用了 width 和 height 属性来改变图片的大小。在 :hover 伪类中，设置了不同的宽度和高度，以便实现鼠标经过图片超链接时改变图片大小的效果。

示例二：使用 transform 属性

<a href="#">
  <img src="image.jpg" alt="图片">
</a>

/* 设置图片的初始大小 */
img {
  width: 200px;
  height: 200px;
}

/* 鼠标经过图片时改变图片的大小 */
img:hover {
  transform: scale(1.5);
}

上述代码中，使用了 transform 属性来改变图片的大小。在 :hover 伪类中，设置了不同的 transform 属性，以便实现鼠标经过图片超链接时改变图片大小的效果。