纯CSS实现hover图片pop-out弹出效果的实例代码


Posted in HTML / CSS onApril 16, 2021

纯CSS实现hover图片pop-out弹出效果的实例代码

实现原理

主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 figure 元素时,背景元素产生变大效果,前景元素产生变大并向上移动效果,从而从视觉上实现弹出效果。

背景元素 figure::before

纯CSS实现hover图片pop-out弹出效果的实例代码

前景元素 figure img

纯CSS实现hover图片pop-out弹出效果的实例代码

1. 使用 overflow: hidden 方式

主体元素的 html 结构由一个 figure 元素包裹的 img 元素构成:

<figure>
  <img src='./man.png' alt='Irma'>
</figure>

css 中设置了两个变量 --hov--not-hov 用于控制 hover 元素时的放大以及位移效果。并对 figure 元素添加 overflow: hidden,设置 padding-top: 5% 用于前景元素超出背景元素时不被截断(非必需:并使用了 clamp() 函数用来动态设定 border-radius 以动态响应页面缩放)

figure {
  --hov: 0;
  --not-hov: calc(1 - var(--hov));
  display: grid;
  place-self: center;
  margin: 0;
  padding-top: 5%;
  transform: scale(calc(1 - .1*var(--not-hov)));
  overflow: hidden;
  border-radius: 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em);
}
figure::before, figure img {
  grid-area: 1/1;
  place-self: end center;
}
figure::before {
  content: "";
  padding: clamp(4em, 20vw, 15em);
  border-radius: 50%;
  background: url('./bg.png') 50%/cover;
}
figure:hover {
  --hov: 1;
}
img {
  width: calc(2*clamp(4em, 20vw, 15em));
  border-radius: clamp(4em, 20vw, 15em);
  transform: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));
}

2. 使用 clip-path: inset() 方式

<figure>
  <img src='./man.png' alt='Irma'>
</figure>

样式基本上与第一种相同,使用 clip-path 来截取圆形背景区域。

figure {
  --hov: 0;
  --not-hov: calc(1 - var(--hov));
  display: grid;
  place-self: center;
  margin: 0;
  padding-top: 5%;
  transform: scale(calc(1 - .1*var(--not-hov)));
  clip-path: inset(0 round 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em));
}
figure::before, figure img {
  grid-area: 1/1;
  place-self: end center;
}
figure::before {
  content: "";
  padding: clamp(4em, 20vw, 15em);
  border-radius: 50%;
  background: url('./bg.png') 50%/cover;
}
figure:hover {
  --hov: 1;
}
figure:hover::before {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);
}
img {
  width: calc(2*clamp(4em, 20vw, 15em));
  border-radius: clamp(4em, 20vw, 15em);
  transform: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));
}

完整示例

<h2>使用overflow: hidden方式</h2>
  <figure>
    <img src='./man.png' alt='Irma'>
  </figure>
  <h2>使用clip-path: path()方式</h2>
  <figure>
    <img src='./man.png' alt='Irma'>
  </figure>
body {
  display: grid;
  background: #FDFC47;
  background: -webkit-linear-gradient(to right, #24FE41, #FDFC47);
  background: linear-gradient(to right, #24FE41, #FDFC47);
}
figure {
  --hov: 0;
  --not-hov: calc(1 - var(--hov));
  display: grid;
  place-self: center;
  margin: 0;
  padding-top: 5%;
  transform: scale(calc(1 - .1*var(--not-hov)));
}
figure:nth-of-type(1) {
  overflow: hidden;
  border-radius: 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em);
}
figure:nth-of-type(2) {
  clip-path: inset(0 round 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em));
}
figure, figure img {
  transition: transform 0.2s ease-in-out;
}
figure::before, figure img {
  grid-area: 1/1;
  place-self: end center;
}
figure::before {
  padding: clamp(4em, 20vw, 15em);
  border-radius: 50%;
  background: url('./bg.png') 50%/cover;
  content: "";
  transition: .25s linear;
}
figure:hover {
  --hov: 1;
}
figure:hover::before {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);
}
img {
  width: calc(2*clamp(4em, 20vw, 15em));
  border-radius: clamp(4em, 20vw, 15em);
  transform: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));
}

到此这篇关于纯CSS实现hover图片pop-out弹出效果的文章就介绍到这了,更多相关css内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
使用CSS设置滚动条样式
Jan 18 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 #HTML / CSS
Html5新增了哪些功能
Apr 16 #HTML / CSS
Html5调用企业微信的实现
Apr 16 #HTML / CSS
CSS3 制作的图片滚动效果
CSS3常见动画的实现方式
Apr 14 #HTML / CSS
CSS3实现的水平标题菜单
Apr 14 #HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
You might like
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
Pycharm更换python解释器的方法
2018/10/29 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
大学生个人事迹材料
2014/01/21 职场文书
个人现实表现材料
2014/02/04 职场文书
市场营销方案范文
2014/03/11 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
建设投标担保书
2014/05/13 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
师范生见习报告
2014/10/31 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书