盒子模型小例子学习--卡片--Day5

卡片结果展示

代码参考http://www.loveo.cc/using-css-to-make-cards-ui.html

CSS文档内容

.card {     width: 400px;     margin: 0px auto;     background-color: white;     box-shadow: 0px 5px 20px #555; } .card:hover .card-image img {     width: 110%;     filter: grayscale(0); } .card-image {     height: 250px;     position: relative;     overflow: hidden; } .card-image img {     width: 100%;     position: absolute;     top: 60%;     left: 50%;     transform: translate(-50%, -50%);     filter: grayscale(1);     transition-property: filter width;     transition-duration: .3s; } .card-body {     text-align: center;     padding: 15px 20px;     box-sizing: border-box; } .card-date {     font-family: 'Source Sans Pro', sans-serif; } .card-title,.card-exceprt {     font-family: 'Playfair Display', serif; } .card-date,.card-title {     text-align: center;     text-transform: uppercase;     font-weight: bold;     letter-spacing: 1px; } .card-date,.card-exceprt,#case-title {     color: #777; } #case-title {     position: absolute;     font: 18px 'Microsoft YaHei';     top:10px;     left:0px;     right:0px;     margin:auto;     display:block;     text-align:center;     text-decoration: none; }

HTML文档内容

11  September  1994                                                                            Happy Birthday!                                                                            Happy birthday my dear!Hope you rose all the way and life is gentle with you forever!