css两张图切换

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS两张图切换,即使用CSS代码实现鼠标悬浮在图片上时,切换成另一张图片。下面是CSS代码实现的方法。.img-container { display: flex; justify-content:

CSS两张图切换,即使用CSS代码实现鼠标悬浮在图片上时,切换成另一张图片。下面是CSS代码实现的方法。

.img-container {
  display: flex;
  justify-content: center;
}

.img-container img {
  width: 300px;
  height: 200px;
  margin: 10px;
  transition: transform .5s ease;
}

.img-container img:hover {
  transform: scale(1.1);
} 

上述代码使用了flex布局,使图片水平居中显示。通过设置图片的宽度、高度、外边距和过渡效果,使图片鼠标悬浮时能够被放大。下面是HTML代码的实现。

<div class="img-container">
  <img src="img1.jpg">
  <img src="img2.jpg">
</div> 

HTML代码中,将两张图片放在一个div容器中,并分别使用不同的路径引用图片。这样就能实现鼠标悬浮时,轻松地切换显示不同的图片。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两张图切换

粉丝

0

关注

0

收藏

0

已有0次打赏