Small div layout card stack (card-stacking)

Front-end page layout and a variety of effects is really dazzling, the company's designers want to be on a site to the front-end layout and style effects are used again.

How do I achieve the following layout effect? I have a name for this layout effect, called the small div layout card stack. Then I Baidu, there really is the implementation of this stacking effect, such as this: jquery and CSS3 cool stacked card expansion and contraction effects. Google card stacking, found an effects for Card Stacks. Of course, the above two URLs on the effect are more complex, I here the demand is simple, as long as the implementation of the following effect is good.

Words don't say much, on the code:

<style>. container {margin:50px auto;  width:328px;    }. Box {background: #f7f7f7;  position:relative;    }. box-content {padding:20px;  width:70%;  }. Box-content-title {margin:0 0 10px;    }. box-content-desc {-webkit-box-orient:vertical;    Color: #333;    Display:-webkit-box;    font-size:14px;    line-height:1.5;    -webkit-line-clamp:4;    margin-bottom:30px;    Overflow:hidden;  Text-overflow:ellipsis;    }. Box-content-link {color: #006ec8;    font-size:14px;  Text-decoration:none;  }. box-content-link:hover {text-decoration:none;    }. box-img {position:absolute;    Right:-38%;  top:20px; }</style><div class= "Container" > <div class= "box" > <div class= "box-content" > 

It's very simple, actually. The child element of box. Box relative positioning, add background color; box-content normal arrangement, with width and padding to control the position of its child elements; box-img absolute positioning, with right and top to control the position, the basic can achieve the desired effect.

