Pure CSS3 Super Cool article card UI design effect

Source: Internet
Author: User
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)!

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.