css 实现悬浮效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2 different hover effects - CodePen</title>
<style>
.hover-set1,.hover-set2 {
width: 790px;
height: 300px;
margin: 0 auto;
margin-top: 25px;
}
.hover-set1 .hover-img {
width: 250px;
height: 250px;
margin: 5px;
float: left;
background: #222;
position: relative;
}
.hover-set1 .hover-img .caption {
background: #DB485E;
padding: 15px 20px;
position: relative;
bottom: 0;
z-index:1000;
transform-origin: bottom center;
opacity: 0;
transform: scale(1,-1) skew(-10deg);
transition: all 0.3s ease-in-out;
}
.hover-set1 .hover-img .caption p {
font-family: Arial;
font-size: 14px;
line-height: 18px;
text-transform: uppercase;
padding-bottom: 10px;
color: #FFD789;
}
.hover-set1 .hover-img .caption a {
display: block;
font-family: 'Arial';
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
padding: 5px;
color: #000;
background: #FFD789;
transition: all 0.5s ease;
}
.hover-set1 .hover-img .caption a:hover {
color: #FFD789;
background: #222;
}
.hover-set1 .hover-img .img {
width: 250px;
height: 250px;
overflow: hidden;
transition: all 0.3s ease;
}
.hover-set1 .hover-img img {
transition: all 0.3s ease;
}
.hover-set1 .hover-img:hover .img {
transform: scale(0.9,0.9);
}
.hover-set1 .hover-img:hover .caption {
opacity: 1;
transform: scale(1,1) skew(0);
}
/* ======== */
.hover-set2 .hover-img {
width: 250px;
height: 250px;
margin: 5px;
float: left;
background: #222/*#44FCF6*/;
position: relative;
overflow: hidden;
transition: all 0.5s ease;
}
.hover-set2 .hover-img {
transition: all 0.5s ease;
}
.hover-set2 .hover-img .img {
overflow: hidden;
transition: all 0.5s ease;
}
.hover-set2 .hover-img .caption {
width: 250px;
height: 250px;
display: block;
background: #1BB5AF;
position: relative;
top: 0;
transform-origin: top center;
transform: rotate(180deg);
transition: all 0.5s ease;
}
.hover-set2 .hover-img .caption p {
padding: 25px;
margin-top: 25px;
font-family: Arial;
font-size: 16px;
line-height: 24px;
text-transform: uppercase;
text-align: center;
}
.hover-set2 .hover-img .caption a {
display: block;
font-family: Arial;
text-transform: uppercase;
text-decoration: none;
text-align: center;
background: #44FCF6;
color: #444;
padding: 10px 0;
transition: all 0.5s ease;
}
.hover-set2 .hover-img:hover .caption {
transform: rotate(0deg);
}
.hover-set2 .hover-img:hover .img {
transform: scale(0.9,0.9);
}
.hover-set2 .hover-img .caption a:hover {
background: #222;
color: #44FCF6;
}</style>
</head>
<body>
<div class="hover-set1">
<h1>HOVER DEMO 1</h1>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/6.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/2.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/3.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
</div>
<div class="hover-set2">
<h1>HOVER DEMO 2</h1>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/4.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/5.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/7.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
</div>
</body>
</html>
最新文章
- 理解 Nova 架构 - 每天5分钟玩转 OpenStack（23）
- java怎么导入一个项目到eclipse
- VI的一些快捷键
- Oracle备份及备份策略
- (转)SQLServer实例讲解
- Hibernate中的继承映射
- [02] Oracle简单单行函数(字符+数值+日期+转换+通用)
- 用ASP编写购物车代码
- 信号处理——傅里叶变换(FT-DTFT-DFT)
- kafka java使用
- java中一个重要思想：面向对象
- vue组件，通过props父组件给子组件传值，WTF, 子组件报错undefined???
- synchronized和volatile的区别
- python 读取mysql数据至csv文件中，并发送邮件
- 切分 拆分集合list的方式
- Struts2 的 配置
- python利用imap实现伪“无痕”取信
- ThreadLocal MDC
- 融合libevent和protobuf
- OAuth 授权timestamp refused问题