利用css实现相册效果

admin

首先来看看效果

css

[pre]

#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[id]: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;
}


[/pre]
html
[pre]
<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>

[/pre]