【抛砖引玉】鼠标悬停，图片由中心放大的过渡效果解决及问题

最新推荐文章于 2024-01-27 20:29:14 发布

a_小木

最新推荐文章于 2024-01-27 20:29:14 发布

阅读量4.7k

点赞数 1

分类专栏：学海无涯文章标签： Web前端响应式布局 css过渡

本文链接：https://blog.csdn.net/xuchao804036998/article/details/52366128

版权

学海无涯专栏收录该内容

0 篇文章 0 订阅

订阅专栏

上周六尝试写我的第二个响应式页面当作练习，去Bootstrap中文网上看了一些案例，最后就决定仿写“https://bigbitecreative.com/”这个页面，写到两张图片展示区域的时候卡住了。鼠标悬停在图片上时图片会由中心放大，但是包裹图片的容器大小是不能跟着被撑开的，于是我开始了艰难的探索之路……

走过的弯路和错误的尝试就不说了，直接上一个成功的demo，先来张图示意一下：

demo

我刚接触响应式布局不久，Bootstrap虽然了解过但是还没真正开始使用，仍然是通过给百分比宽度和媒体查询的方式为不同分辨率的设备编写样式。

该demo中，box给到96%的宽度，水平居中显示，作为一个大块；<ul>直接100%宽度；<li>给49%，左浮动，第二个<li>给2%的margin-left，最基本的布局完成。

回到问题，此时所有元素都是没有高度的。由于是响应式布局，所以<li>的高度不能定死，这是一个困扰我的问题，解决的方法是参照“https://bigbitecreative.com/”的方法，为<li>增加li:before样式：

.box li:before{ 
display:block;
content:""; 
width:100%; 
padding-top:46.51%; 
background:linear-gradient(90deg,rgba(0,0,0,0.5) 0,hsla(0,0%,100%,0) 60%);
}

最后一项的渐变背景稍后再说，padding-top的数值在原网页上给的是46.04317%。经过测试，该数值应为我们需要显示的背景图片的高与宽的比，此例中为400/860≈46.51%，实际操作中可微调，确保容器高度不大于当前图片显示的高度即可。

此时li:before这个伪元素和<li>都已经拥有了高度，两个<li>各自使用

style="background-image:url(images/metro-2.jpg)"

将背景图片加入，同时为<li>添加样式对背景图加以控制：

background-position: center center; 
background-repeat:no-repeat;
background-size:100%;

到这里可以为<li>添加一个hover，将background-size调大一些，<li>的样式中给上过渡属性：transition:all 0.3s ease-in-out;最基本的效果就已经实现了。

为了实现和原网页中一样的效果，接下来还有内容。实际应用中光图片展示肯定是不够的，此实例中图片上就有一层渐变效果，左侧还有一段文字，整个图片区域是一个超链接。于是，继续完善。

<li>中添加一个<a>元素，和前面一样的问题，没有宽高。这个<a>是要覆盖住整张图片区域以供用户点击，那么自然想到用刚才的before来解决。代码如下：

.box a{ 
display:block;
width:100%; 
position:absolute;
top:0; left:0;
}

.box a:before{
display:block;
 content:""; 
width:100%; 
padding-top:46.51%;
}

此时需要为<li>加上position:relative;整理一下完整的<li>样式：

.box li{
width:49%; 
float:left;
background-position: center center;
background-repeat:no-repeat;
background-size:100%;
position:relative; 
transition:all 0.3s ease-in-out;
}

接下来再向<a>中添加一个<p>，浮动于左下角，高度随屏幕缩小而增高，样式如下：

.box p{ 
width:50%;
position:absolute;
left:4%;
bottom:4%;
font-size:1.2em;
line-height:1.2em;
color:#fff;
}

这里我有一个疑问，<a>作为<p>的父级元素，也是绝对定位的，这个<p>的位置却好像按需要的那样找到了更上一层的<li>作为了参照，到底这个<p>以谁作为了参照？等会儿再琢磨琢磨。

到这里为止，<ul>、box以及<body>似乎被忽略了，他们还没有高度呢！这个在之前清除浮动的一篇文章中学到了经验，给<ul>一个class="clearfix"，通过以下代码将<ul>丢失的高度找回来。

.clearfix:after {
content:""; 
display:block;
height:0; 
visibility:hidden; 
clear:both; 
} 
.clearfix { *zoom:1; }

<ul>的高度有了，box和<body>的高度自然就有了，到此结束！
前端小菜的第一篇记录，虽然只是解决了一个很小的问题，实现了一个很简单的效果，但还是学到了新的知识，尝到了亲自动手、解决问题的快乐。希望能够得到大神们的批评指教。

a_小木

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
【抛砖引玉】鼠标悬停，图片由中心放大的过渡效果解决及问题

响应式布局中，实现鼠标悬停，图片由中心放大且不撑开容器的简单css过渡效果。
复制链接

扫一扫

专栏目录

【抛砖引玉】鼠标悬停，图片由中心放大的过渡效果解决及问题

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