boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果。这组图片hover效果共16种特效。同时该特效也支持非Bootstrap版本。
使用方法
在页面中引入bootstrap相关文件和FontAwesome字体图标文件以及effects.min.css文件。
HTML结构
该css3图片hover效果的每一种效果都有它们自己的HMTL结构,第一种效果的HTML结构如下:
Hover effect 1
Show code
在DEMO示例中,使用鼠标滑过图片,在hover效果中点击 show code 链接,可以弹出该效果的模态窗口,可以直接复制后使用该效果。
如果你不需要Bootstrap的支持,只需要将顶级div中的col-* class类去掉即可。
CSS样式
第一种效果的CSS样式如下:
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}
.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}
.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}
.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}
.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}
.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}
boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果相关推荐
- boostrap 鼠标滚轮滑动图片_BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)...
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 因为最近开发的项 ...
- boostrap 鼠标滚轮滑动图片_Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法...
最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...
- html网页滚轮滑动页面,JQuery实现鼠标滚轮滑动到页面节点
下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍,并通过展示效果图展示给大家. 基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势 ...
- Js实现鼠标滚轮滑动监听
在别人博客的基础上改写了一个js实现鼠标滚轮事件的监听: windowAddMouseWheel(); function windowAddMouseWheel() {var scrollFunc = ...
- 控制鼠标滚轮滚动的两种方法
1 $(function(){ 2 // jquery 兼容的滚轮事件 3 var strat = true; 4 var mark = 0; 5 $(document).on("mouse ...
- 苹果Mac OS X怎样设置鼠标滚轮滑动的方向/反向
对于电脑的主人来说,这个叛逆OS X需要调教一下,才能用得称心如意,方法如下: 1.首先打开左上角全局菜单中的"偏好设置" 2.然后在偏好设置中找到"鼠标"点击 ...
- html好看的按钮css样式大全,css3教程_五种漂亮样式,CSS3动画按钮效果
CSS代码: .button01 { width: 200px; margin: 50px auto 20px auto; } .button01 a { display: block; height ...
- qt,QGraphicsView实现鼠标中键拖动图片,鼠标滚轮缩放、两个窗口联动左键选点等功能(c++pyqt两个版本)
先看效果: (1)c++版本(一个动图): (2)pyqt版本(一个图):与c++版本一毛一样,用的同一个ui文件,此处动图略 实现关键点:1)拖动:重写QGraphicsView类,鼠标中键按下记录 ...
- html 页面缩放事件,使用HTML5实现通过鼠标滚轮事件放大和缩小图片的功能
您和我都知道,向HTML5网页添加鼠标滚轮事件可以更好地允许用户与网页进行交互. 在HTML5中,鼠标滚轮不仅可以在网页上上下滑动,实际上,您还可以依靠它来完成更,例如放大和缩小视图平面. 看看实际的 ...
最新文章
- LeetCode刷题-2
- mysql中的if else decode
- java 运算顺序 从左到右_java – 表达式与运算符优先级的从左到右的评估.为什么从左到右的评估似乎胜出了?...
- linux上热编译react,如何使用react进行热加载
- 李林APUE之进程的封装
- HBase—基础介绍
- [Python]两个list对应元素操作(相减)
- flow.php 漏洞,Ecshop 3.0的flow.php文件SQL注射漏洞修复
- iOS中书写代码规范35条小建议
- 【优化预测】基于matlab布谷鸟算法优化灰色模型预测【含Matlab源码 1244期】
- 最全的c#日期函数 winform
- c语言图形格式输出,C语言输出图形9个.doc
- TRIZ创新方法#学习笔记02# |功能分析、技术矛盾和物理矛盾
- elementUI 日 周 月 季 年 时间选择控件封装
- win10 企业版 设备管理器找不到 端口(COM和LPT)
- 供应商分级方案:企业供应商管理系统助力汽车零部件企业实现供应商自动分级
- 更改ubuntu默认文件管理器为deepin
- cmd 下登陆ftp及相关操作
- Java反射API简介
- 荣誉系统排名是整个服务器,魔兽世界60年代的PVP荣誉系统、军阶对照表和各职业的徽记效果...
热门文章
- .net Core2.2 WebApi通过OAuth2.0实现微信登录
- 微软热门开源项目及代码库地址
- 【深圳(活动)】70多场干货分享!价值899元的2018中国开源年会门票等你认领
- 祝大家狗年家庭事业旺旺旺
- ASP.NETCore的Kestrel服务器
- Postman高级应用——流程控制、调试、公共函数、外部数据文件
- 微软Project Springfield团队的F#使用心得
- 电机与系统计算机仿真作业,北邮计算机仿真期末大作业.docx
- php 合并 字符串_PHP如何去重合并字符串
- 存储服务器的操作系统,存储服务器是什么操作系统