纯CSS实现鼠标悬停图片上时显示button按钮效果

所属分类: 网页特效-图片特效&上传    2023-11-28 11:58:19

纯CSS实现鼠标悬停图片上时显示button按钮效果 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

纯CSS实现鼠标悬停图片上时显示button按钮效果(共3个文件)

    • index.html

使用方法

body{
   display: block !important;
    background: linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4) !important;
}
.card{
  position: relative;
  min-height: 300px;
  width: 500px;
  margin: 50px auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.card:hover .overlay {
  display: block;
  background: rgba(0, 0, 0, .3);
}

.card img {
  position: absolute;
  width: 500px;
  height: 300px;
  left: 0;
}

.title {
  position: absolute;
  width: 500px;
  left: 0;
  top: 120px;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  color: white;
  z-index: 1;
  transition: top .5s ease;
}

.card:hover .title {
  top: 90px;
}

.button {
  position: absolute;
  width: 500px;
  left:0;
  top: 180px;
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
}

.button a {
  width: 200px;
  padding: 12px 48px;
  text-align: center;
  color: white;
  border: solid 2px white;
  z-index: 1;
}

.card:hover .button {
  opacity: 1;
}

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 图片特效&上传

jquery鼠标悬停或移动端触摸长按图片缩放特效插件

一款鼠标悬停或手机端长按触发的图片特效插件,当鼠标悬停或点击并按住图片时,触发对图片平滑的缩放和动画效果。支持4种自定义图片效果:默认、变焦效果、发光效果、禁用触摸。
  图片特效&上传
 7250  0

jquery实验室3D动画房展览图片轮播特效代码

一款全屏响应式图片幻灯片特效,犹如在现成观看一次摄影展览秀,非常震撼的特效。
  图片特效&上传
 3252  0

jquery图片模拟放大镜插件abPicZoom

一款实用的图片放大功能的插件,使用方便通过配置一定的参数,来设置放大镜的外观样式等属性。需结合agilebins特效插件的组图功能来实现放大镜的多图切换效果。
  图片特效&上传
 543  0

纯CSS创建的带过渡栅格动画的图片幻灯片特效

每张图片都会从侧面缓慢进入,同时带有栅格状动画,从而产生幻灯片效果。
  图片特效&上传
 3168  0

评论数(4) 回复有机会获得K币 用户协议

    铁头de科技0
    2024-01-17 12:52:46
    何处不逢杨0
    2024-01-10 14:53:32
    kuliwa0
    2023-12-16 13:39:15
    great0
    2023-12-07 20:13:37
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论