专栏首页开心分享-技术交流CSS中鼠标滑过图片放大效果

CSS中鼠标滑过图片放大效果

刚刚看了下感觉还不错,纯CSS实现,虽然在开发主题时CSS3用的比较少。这是一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示的图片中,这样可以将鼠标移到图片上进行快速预览图片。同时你也可以在此基础上扩展它,比如给图片加投影和边框等。整一个图片放大特效还是比较酷的。

但在写代码之前,我们要做的就是:

  1. 悬停在上面的卡应该在保持长宽比的同时展开。
  2. 当一张牌悬停时,其他牌不应改变大小并向外移动,以免彼此重叠。
  3. 所有的牌应该保持垂直居中。

听起来不错吧?现在让我们开始带大家一步步写代码。

HTML和flexible元素

让我们先设置一行预览的图像。其中包括:

  1. 包含多个.item元素的.container父元素容器
  2. 每个.item元素都包含一个包装在锚标记中的图像
  3. .container转换为一个flex容器,该容器将行中的项对齐
  4. 设置.item类的flex行为,使它们在行中占用相等的空间

HTML代码如下:

<div class="container">
  <a href="#animals" class="item"><img src="./animals.png" alt="Animals"></a>
  <a href="#architecture" class="item"><img src="./architecture.png" alt="Architecture"></a>
  <a href="#nature" class="item"><img src="./nature.png" alt="Nature"></a>
  <a href="#people" class="item"><img src="./people.png" alt="People"></a>
  <a href="#tech" class="item"><img src="./tech.png" alt="Tech"></a>
</div>

CSS代码如下:

.container {
  display: flex;
  margin-top: 50px;
}

.item {
  position: relative;
  display: block;
  flex: 1 1 0px;
}

.item img {
  display: block;
  max-width: 100%;
}

效果如下:

CSS3中鼠标滑过图片突出放大效果

悬停时展开项目

我们的下一步是让项目在悬停时展开。我们可以通过设置元素宽度的动画来实现这一点,但这会影响文档的流动,并导致悬停项的同级项收缩–另外,设置宽度属性的动画在某些情况下会降低性能。

为了避免挤压悬停项的同级,我们将设置transform属性的动画(特别是它的scale()函数)。这不会像width那样影响文档流。

CSS代码如下:

.container {
  display: flex;
  margin-top: 50px;
}

.item {
  position: relative;
  display: block;
  flex: 1 1 0px;
  transition: transform 500ms;
}

.container .item:focus,
.container .item:hover {
  transform: scale(1.5);
  z-index: 1;
}

body {
  overflow: hidden;
}

.item img {
  display: block;
  max-width: 100%;
}

GIF效果如下:

CSS3中鼠标滑过图片突出放大效果

向外移动兄弟元素

让悬停项的兄弟项远离悬停项是整个过程中很棘手的部分。我们可以使用的一个CSS特性是一般的兄弟组合器。这使我们可以选择位于悬停项之后的所有同级项。

我们将转到transform属性的translateX()函数来移动对象。同样,对转换设置动画比影响文档流的其他属性(如边距和填充)要好得多。

因为我们设置了一个项目在悬停时可以放大150%,所以转换应该设置为25%。这是悬停项所占用的额外空间的一半。

.item:hover ~ .item {
  transform: translateX(25%);
}

这样可以将事物向右移动,但是我们如何转换左边的项目呢?由于通用的同级组合器仅适用于位于给定选择器之后的同级(没有“向后”),因此我们需要另一种方法。

一种方法是在父容器本身上添加其他悬停规则。这是计划:

  • 悬停父容器时,请将该容器内的所有项目向左移动。
  • 使用通用的同级组合器可以将悬停的项目向右移动后放置的项目。
  • 获得超级特定的信息,因此悬停的项目不会像其他项目一样进行转变。

我们假设您的文档使用从左到右的书写模式。如果要在从右到左的上下文中使用此效果,则需要将悬停的外部容器内的所有项目设置为向右移动,并使用常规的同级组合器将所有选定的项目向左移动。

代码如下:

.container {
  display: flex;
  margin-top: 50px;
}

.item {
  position: relative;
  display: block;
  flex: 1 1 0px;
  transition: transform 500ms;
}

.container:focus-within .item,
.container:hover .item {
  transform: translateX(-25%);
}

.item:focus ~ .item,
.item:hover ~ .item {
  transform: translateX(25%);
}

.container .item:focus,
.container .item:hover {
  transform: scale(1.5);
  z-index: 1;
}

body {
  overflow: hidden;
}

.item img {
  display: block;
  max-width: 100%;
}

最终GIF效果如下:

CSS3中鼠标滑过图片突出放大效果 向外移动兄弟元素

此时悬停效果看起来更加圆滑,不再那么生硬。需要注意的一点是:此最终版本正在使用:focus:focus-within伪类来支持键盘导航。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS 控制鼠标划过,图片放大效果

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

    泥豆芽儿 MT
  • CSS实现鼠标滑过卡片上浮效果

    代码实现: 在 hover 状态增加了 transition 属性,从而产生渐变的效果。

    文渊同学
  • css实现鼠标划过图片放大或缩小

    每个网站上面都会有文章列表,有的是纯文字形式,有的则是图片+文字形式,两种相对而言当然是第二种更受欢迎,但是第二种加载个多个图片,也会导致网页打开速度变慢,大部...

    小白程序猿
  • css实现鼠标悬停图片放大

    解析: transform:scale()可以实现按比例放大或者缩小功能。 transition允许CSS的属性值在一定的时间区间内平滑过渡。 可以调节放大倍数...

    马修
  • CSS3实现鼠标移动图片上图片变大(缓慢变大,放大过程有动画过渡,过渡时间可自定义)

    CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果...

    V站CEO-西顾
  • js+css 鼠标点击按钮切换图片效果制作

    梦溪
  • 前端成神之路-CSS高级技巧

    所以我们知道,我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

    海仔
  • 放大镜原理

    上面代码中,图片没有设置高度,我们在JavaScript中用 img.offsetWidth 来获取。获取之后设置 wrapper 的宽度与 img 的宽度相同...

    多云转晴
  • Web页面中5种超酷的Hover效果

    想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来...

    葡萄城控件
  • 前端成神之路-01_jQuery

    ​ JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数...

    海仔
  • 动态实现指定图片半透明及鼠标事件

    说明:在不改变HTML代码的前提下,通过CSS和JavaScript,对指定的图片实现半透明效果。并为该图片添加鼠标滑过和滑出特效。 具体实现: 1.假设我们要...

    小李刀刀
  • JQuery实现图片切换(自动切换+手动切换)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

    DannyHoo
  • 电商放大镜及动态边框效果

      但是以上两个思路均有问题。如果设置border,如何使其边框动画?如果周边设置4个div,那么不仅是需要js操控,并且无形之中增加了许多复杂度,与编程思想背...

    流眸
  • 前端中那些让你头疼的英文单词

    作为一个程序员,一个标标准准的理工男,肯定会有一个问题,英语虐我千百遍,我却待它如初恋。相信我,为英语头疼的你并不孤单。除了那些天赋异禀的神人,我们都一样。

    小闫同学啊
  • jQuery 效果

    显示隐藏动画,常见有三个方法:show() / hide() / toggle() ;

    星辰_大海
  • CSS系列之教你几招小技巧,让开发更高效

    俗话说「人靠衣装马靠鞍」,一个网页的漂亮与否CSS起到了很大的作用。它能够帮助我们进行美化。因此 CSS 在前端开发中的地位不用多说。

    六小登登
  • 纯代码给你的网站增加图片灯箱效果,增强落地页体验

    灯箱效果是我一直想加又没有加的功能,正好最近百度在推移动落地页检测,顺手做一下优化

    沈唁
  • Swiper开篇

     swiper是一款轻量级以及免费的移动设备触控滑块的js框架,主要运用于移动端的操作,但也可以用于pc端页面效果制作,完全的开源免费,

    用户3159471
  • HTML概要

    HTML CSS Javascript 的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 CSS...

    用户1214695

扫码关注云+社区

领取腾讯云代金券