使hover出来的图片居中显示

最新推荐文章于 2021-06-04 21:40:50 发布
VIP文章 最新推荐文章于 2021-06-04 21:40:50 发布
阅读量1.6k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duanmingyue789/article/details/73018354
版权

(1)给父级元素加一个相对定位 给子集元素加一个绝对定位
使子元素居中显示的方法即 left：50% margin-left：负子元素宽度的一半
(2)对文字hover 底下图片出来 故要用一个a链接包裹

<div class="col-md-2 text-center">
  <a class="mobile-link" href="#">
    <i class="icon-mobile"></i>
    <span>手机微金所</
最低0.47元/天 解锁文章
duanmingyue789
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
a:hover 选择鼠标经过的链接/悬停时链接 a:active 选择的是鼠标正在按下没有弹起的链接 注意：按照LVHA的顺序写 链接在浏览器中有默认样式 所以一般需要单独指定 （6）焦点选择器（对input标签） 用于选取...
元素垂直居中与hover失效
吴钦飞
10-23 945
1. 垂直居中
CSS的居中问题，五大方法一次解决
邢思北的博客
04-14 667
五种CSS常见居中方式（水平居中、垂直居中） 1.margin居中 实现块元素的水平居中 HTML： <div class="box"></div> CSS: .box{ width: 200px; height: 200px; background-color: #ff6700; margin: 0 auto; } 效果图： 2.绝对定位 absolute ...
Html5入门-hover选择器（一）
Kurt的博客
12-30 4141
先上源码： 无标题文档 ul li{float:left;list-style-type:none;width:60px;height:40px;border-bottom:solid 2px #aa0000;text-align:center;} ul li a{display:block;color:#000;font-size:20px;width:60px;hei
css伪类hover新的应用技巧思考+fixed屏幕居中
Maci_yera的博客
12-04 859
1.写在前面 之前的理解是hover伪类是写在某个元素上，鼠标移到上面就可以修改此元素的样式，可不可以改变另一个非hover元素样式呢？在使用less的时候，可以这么写：.nav:hover{ color:red; .block{ color:blue; } }含义是hover到nav元素时，既改变nav样式又改变另一个任意block元素样式。那么在css里
CSS中使用Hover显示图片例子
热门推荐
gamenoover的博客
05-15 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
css3 实现图片遮罩效果,hover出现文字
Full Stack
11-04 1万+
css3 实现图片遮罩效果,hover出现文字
html5 图片hover,关于html5:两种纯CSS方式实现hover图片popout弹出效果
weixin_42400970的博客
06-04 843
实现原理次要图形的组成元素由背景和前景图两个元素，以下示例代码中，背景元素应用伪元素 figure::before 示意， 前景元素应用 figure img 示意，当鼠标hover悬浮至figure元素时，背景元素产生变大成果，前景元素产生变大并向上挪动成果，从而从视觉上实现弹出成果。背景元素 figure::before前景元素 figure img1. 应用 overflow: hidden...
html导航栏位置垂直居中,导航栏文字如何垂直居中？
weixin_35336727的博客
06-04 2906
/* CSS布局 */body {padding:0;margin:0;font:12px Tahoma, sans-serif;text-align:center;}/* 网页顶部布局 */.header {width:950px;height:84px;background:#ffffff;color:#808080;margin:0 0;padding:1px 0 0 0;}.logo {f...
html图片在div页面水平垂直居中显示,CSS解决页面图片水平垂直居中问题的方法...
weixin_39734646的博客
06-03 453
做为一个前端设计人员，对于产品展示页面的设计一定不会陌生，其中产品图片摆放是必定经历的一步，并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中，实现也是相当的方便，唯一不足之处就是结构繁锁，那么今天和大家一起看几种不是使用talbe方法...
CSS3等相关属性制作分页导航实现代码
12-13
W3cplus第二版本刚上线时，好多位朋友向我问起站上的分页导航样式是怎么制作，像是图片一样。...让列表水平居中，这个效果我曾多次碰到同学问怎么使用一个列表居中显示，并且排在一行，列表还要自适
利用CSS3实现动态的二级三级菜单效果实例
12-02
基础掌握知识  1.boder-radis圆角的制作 ...设置一级菜单的宽度、整体居中显示、用border设置颜色为#222的1像素宽的边框、用background-color设置背景颜色为#111、用background-image和linear-grad
web前端开发基本问题解决
05-08
超链接访问过后hover样式就不出现的问题 FF下如何使连续长字段自动换行 ff下为什么父容器的高度不能自适应 IE6的双倍边距BUG IE6下绝对定位的容器内文本无法正常选择的问题 IE6下为什么图片下方有空隙产生 IE6下这两...
超实用的jQuery代码段
03-04
1.30 页面加载后消息框居中显示 1.31 创建页面固定浮动栏的方法 第2章 jQuery操作DOM元素 2.1 如何验证某个元素是否为空 2.2 检查特定的HTML元素是否存在 2.3 判断HTML元素是否嵌套 2.4 获取当前元素的索引值 2.5 ...
node-v5.11.0-x86.msi
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
41532698775097Facebook Lite_405.0.0.8.113_apkcombo.com.armeabi-v7a.apk
05-07
41532698775097Facebook Lite_405.0.0.8.113_apkcombo.com.armeabi-v7a.apk
2024-2030中国RDF制粒机市场现状研究分析与发展前景预测报告.docx
05-07
2024-2030中国RDF制粒机市场现状研究分析与发展前景预测报告
财务困境-RLPM模型.xlsx
最新发布
05-07
详细介绍及样例数据：https://blog.csdn.net/li514006030/article/details/138549562
3张图片，怎么使transform: scale(2)放大时的图片居中显示
06-09
要让使用transform: scale(2)放大的图片居中显示，需要通过以下步骤进行： 1. 将图片放置在一个容器中，并设置该容器的宽度和高度。 2. 将容器的display属性设置为flex，并使用justify-content和align-items属性来使图片居中显示。 3. 在应用transform: scale(2)之前，将图片的位置设置为absolute，并使用top、left、bottom和right属性来使图片居中显示。这可以保证图片在缩放时不会偏移位置。 4. 应用transform: scale(2)来放大图片。 以下是一个示例代码： HTML: ``` <div class="container"> <img src="your-image.jpg" alt="Your Image"> </div> ``` CSS: ``` .container { width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; position: relative; } .container img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .container img:hover { transform: scale(2); transition: transform 0.5s ease; } ``` 在这个示例中，容器的宽度和高度被设置为500px，并使用flex属性将图片居中显示。在应用transform: scale(2)之前，图片被设置为绝对定位，并使用top、left、bottom和right属性将其居中显示。当鼠标悬停在图片上时，应用transform: scale(2)来放大图片，并使用过渡效果来平滑过渡。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值