CSS悬停缩小特效

wj1713520

已于 2022-08-22 18:41:02 修改

阅读量928

点赞数

分类专栏： CSS tailwindCSS 文章标签： css 前端 html

于 2022-08-21 21:26:33 首次发布

本文链接：https://blog.youkuaiyun.com/wj1713520/article/details/126455669

版权

该博客介绍了如何使用CSS和TailwindCSS实现一个图片悬停特效：当鼠标悬停在一张图片上时，该图片放大，同时其他图片缩小。通过结合普通CSS和TailwindCSS的类，详细阐述了实现这一交互效果的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

悬停(hover)在一张图片上的时候，其他图片缩小，悬停的那张图片放大

需要普通css结合tailwindcss共同实现：

1.tailwindcss负责制作悬停放大的效果

2.普通css负责制作其他2张图片缩小的效果

普通css代码：

.hoverImg:hover img:not(:hover) {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  html {
    font-size: 32.5%;
  }
  .hoverImg:hover [alt="sight 2"]:not(:hover) {
    transform: translateX(-50%);
  }
}

tailwindcss代码：

              <div className="hoverImg relative">
                <img
                  src="./images/nat-1-large.jpg"
                  className="shadow-xl rounded-md w-[40%] md:w-[55%] absolute md:left-[2rem] md:top-[-1rem] hover:scale-110 hover:shadow-2xl hover:z-20 transition-all hover:outline-[1rem] hover:outline-green-500 hover:outline-offset-4 md:hover:outline-offset-8 hover:outline hover:-translate-y-[.5rem]"
                  alt="s