9 Kinds of pure CSS3 character information Card UI design effect

This is a set of pure CSS3 character information Card UI design effect. This group of characters information card A total of 9 kinds of effects, each effect when the mouse over the card, through the CSS3 to make the picture and HTML element deformation generated very beautiful mouse slide over animation effects.

 

Online preview Source Download

How to useHTML Structure

The basic HTML structure of the character information card is as follows:

<Divclass= "Single-member effect-3">  <Divclass= "Member-image">    <imgsrc= "Demo.jpg"alt="">  </Div>  <Divclass= "Member-info">    <H3>Title</H3>    <h5>Sub-headings</h5>    <P>Description information ...</P>    <Divclass= "Social-touch">      <aclass= "Fb-touch"href="#"></a>      <aclass= "Tweet-touch"href="#"></a>      <aclass= "Linkedin-touch"href="#"></a>    </Div>  </Div></Div>            

CSS Styles

Add some common styles to the card:

. Single-member{width:280px;float: Left;font-family:Sans-sarif;margin:30px 2.5%;Background-color:#fff;text-align:Center;position:relative;}. member-image img{Max-width:100%;vertical-align:Middle;}H3{font-size:24px;Font-weight:Normal;margin:10px 0 0;Text-transform:Uppercase;}h5{font-size:16px;Font-weight: -;margin:0 0 15px;Line-height:22px;}P{font-size:14px;Font-weight: -;Line-height:22px;padding:0 30px;Margin-bottom:10px;}. Social-touch a{Display:Inline-block;width:27px;Height:26px;vertical-align:Middle;margin:0 2px;Background-image:URL (images/social-icons.png);background-repeat:no-repeat;Opacity:0.7;transition:0.3s;}. Social-touch a:hover{Opacity:1;transition:0.3s;}. Fb-touch{background-position:0 0;}. Tweet-touch{background-position:-35px 0;}. Linkedin-touch{background-position:-71px 0;}. icon-colored. Fb-touch{background-position:0-27px;}. icon-colored. Tweet-touch{background-position:-35px-27px;}. icon-colored. Linkedin-touch{background-position:-71px-27px;}

Other effects of CSS code please refer to the download file.

Online preview Source Download

9 Kinds of pure CSS3 character information Card UI design effect