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

原创 2016年08月30日 08:31:36

上周六尝试写我的第二个响应式页面当作练习,去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>的高度自然就有了,到此结束!
前端小菜的第一篇记录,虽然只是解决了一个很小的问题,实现了一个很简单的效果,但还是学到了新的知识,尝到了亲自动手、解决问题的快乐。希望能够得到大神们的批评指教。


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对...

css bootstrap鼠标移到图片 放大

img{ cursor: pointer; transition: all 0.6s; } img:hover{ transform: sc...

css实现鼠标悬停图片放大显示

* { margin: 0; padding: 0; font-family: "微软雅黑"; } .avatar { display: block; ...

使用jqzoom插件实现图片放大镜效果

jqzoom插件实现图片放大镜效果。 图1.1jqzoom插件实现图片放大镜效果 1、引入jqurty和jqzoom插件 2、应用官方网站给定的样式 /*jQzoom*/ .jq...

Linux Centos7.2下安装nodejs&npm配置全局路径

首先登陆官网:https://nodejs.org/en/安装之前检测是否装了gcc gcc-c++ python 2.7+没有的话yum install 下载完成之后上传到Linux: rz...

java项目里classpath具体指哪儿个路径

一、classpath路径指什么     只知道把配置文件如:mybatis.xml、spring-web.xml、applicationContext.xml等放到src目录(就是存放代码.java...

用CSS实现鼠标悬停图片放大的效果

使用CSS制作鼠标悬停放大
  • sugarf
  • sugarf
  • 2016年09月06日 06:16
  • 751

JQUERY实现鼠标悬停在图片上模拟放大镜效果

JQUERY实现鼠标悬停在图片上模拟放大镜效果

HTML 图片鼠标悬停动态效果

法一: 在head中添加: window.onload = function(){  var img = document.getElementById("imgTest...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【抛砖引玉】鼠标悬停,图片由中心放大的过渡效果解决及问题
举报原因:
原因补充:

(最多只允许输入30个字)