Pure CSS3 Super Cool article card UI design effect

Brief tutorials

This is an ultra cool article card UI design effect made with pure CSS3. The article card has a shadow effect, and when the mouse hovers over the card, the description of the article is displayed in the card as a slide animation.

How to use

HTML structure

The HTML structure of a card is as follows:

<div class= "Tile" >      <div    class= "text" >    
CSS Styles

The entire card wrap container is laid out in flex.

. wrap{  margin:50px auto 60px auto;  width:100%;  Display:flex;  Align-items:space-around;  max-width:1200px;}
The width and height of each card are set to 380 pixels. and use the Box-shadow property to set a large shadow effect for the card, while animating the transition of the ease-out effect for all animations.

. tile{  width:380px;  height:380px;  margin:10px;  Background-color: #99aeff;  Display:inline-block;  Background-size:cover;  position:relative;  Cursor:pointer;  Transition:all 0.4s ease-out;  box-shadow:0px 35px 77px-17px Rgba (0,0,0,0.44);  Overflow:hidden;  Color:white;  font-family: ' Microsoft yahei ', Sans-serif;}
The picture in the card uses absolute positioning, with a width and height of 100%, which fills the entire card.

. tile img{  height:100%;  width:100%;  Position:absolute;  top:0;  left:0;  z-index:0;  Transition:all 0.4s Ease-out;}
The text layer page in the card uses absolute positioning, placing the text above the picture with the Z-index property. H2 text and P text are moved by the Translatex function-200%, moving them outside the card, initially invisible.

. Tile. text{  z-index:99;  Position:absolute;  padding:30px;  Height:calc (100%-60px);}. Tile h1{  font-weight:300;  margin:0;  text-shadow:2px 2px 10px Rgba (0,0,0,0.3);}. Tile h2{  font-weight:100;  margin:20px 0 0 0;  Font-style:italic;   Transform:translatex (200px);}. Tile p{  font-weight:300;  margin:20px 0 0 0;  line-height:25px;  Transform:translatex ( -200px);  Transition-delay:0.2s;}. animate-text{  opacity:0;  Transition:all 0.6s Ease-in-out;}
When the mouse slides over the card, the shadow of the card is modified and the card is magnified 1.05 times times. The transparency of the picture in the card is set to 0.2, the text will be the original position, and the transparency is set to 1.

. tile:hover{box-shadow:0px 35px 77px-17px Rgba (0,0,0,0.64);  Transform:scale (1.05);}. Tile:hover img{  opacity:0.2;}. Tile:hover. animate-text{  Transform:translatex (0);  Opacity:1;}
Above is CSS3, article card, UI design content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

