css 实现悬浮效果
Posted 积硅步
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于css 实现悬浮效果的主要内容，如果未能解决你的问题，请参考以下文章