利用css实现相册效果
首先来看看效果css
#grid li {
float: left;
list-style: none;
margin: 0 25px 25px 0;
position: relative;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.25);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
-ms-transition: all 0.15s ease-in;
transition: all 0.15s ease-in;
}
#grid li.end {
margin-right: 0;
}
#grid li:nth-child(3n) {
margin-right: 0;
}
#grid img, li:target div, #grid li, .backface {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 200px;
height: 150px;
}
#grid .details {
position: absolute;
bottom: 0;
background: #fff;
background: rgba(255, 255, 255, 0.87);
border-top: 1px solid #fff;
width: 200px;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35);
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35);
}
#grid .details h3 {
margin-bottom: 0px;
letter-spacing: -1px;
}
#grid .details h3:hover {
-webkit-transition: margin-left .8s;
-moz-transition: margin-left .8s;
-o-transition: margin-left .8s;
margin-left: -30px;
}
#grid .details a.more {
position: absolute;
right: 10px;
top: 5px;
text-decoration: none;
font-size: 12px;
padding: 6px 10px;
background-color: rgba(0, 0, 0, 0.03);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 15px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6);
-webkit-transition: all 0.15s ease-in;
}
#grid .details a.more:hover {
background-color: #0090e2;
color: #fff;
}
#information {
z-index: 20;
}
#information li div h3 {
background-color: #0090E2;
border-radius: 5px 5px 0 0;
color: #fff;
font-size: 20px;
font-weight: bold;
margin: -30px -30px 20px;
padding: 15px 30px;
text-shadow: rgba(0, 0, 0, 0.4492);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
letter-spacing: -2px;
}
html
<div id="container">
<ul id="grid" class="group">
<li>
<div class="details">
<h3>这时标题1</h3>
<a class="more" href="#info1">阅读量</a> </div>
<a class="more" href="#info1"><img src="https://bbskali.cn/data/attachment/forum/202106/01/164055g0fsj2f7d80j0zkk.jpg" /></a> </li>
</ul>
<ul id="grid" class="group">
<li>
<div class="details">
<h3>这时标题2</h3>
<a class="more" href="#info1">阅读量</a> </div>
<a class="more" href="#info1"><img src="https://bbskali.cn/data/attachment/forum/202007/26/074440y66zgaawngrwwaan.png" /></a> </li>
</ul>
</div>
页:
[1]