首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS3图片以中心缩放,放大超出隐藏实现

CSS3图片以中心缩放,放大超出隐藏实现

作者头像
wfaceboss
发布2019-04-08 10:49:09
2K0
发布2019-04-08 10:49:09
举报
文章被收录于专栏:wfacebosswfaceboss

首页,重点是有一个包裹img标签的容器,这里我们给该容器设置一个class为selfScale

 <div class="selfScale">
    <img sr="#" />
  </div>

接下来,给样式

.selfScale{//容器
  cursor: pointer;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.selfScale img{//容器中东西
  width: 100%;
  top: 0;
  position: relative;
  left: 0;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  transition: transform 0.3s;
}
.selfScale img:hover{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

这样就可以实现在指定容器中缩放图片了。

效果图的变化如下:

默认情况下的图片:

鼠标移入放大后的图片:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-11-15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档