responsive hovering animation example

pc 

mobile (max:width960px)

This example is  animation effects when hovering the card,which is responsive for pc and mobile.

 Step1:
HTML

html

In the box,there are two parts:icon and content which can be replaced by any information.

Step2:
CSS3

css1

 The attribure called display:flex makes the the box in the middle of the page.
Given the position relatively ,the box gets border styles.
When hovering, the border of box turns color.

css2

 Then two short lines are from :before :after,and justify their positions.
When hovering the box, the two lines slide from left to right with animations,and show from hidden opacity.

css3

 The icon (image) is fixed at the absolute position at first.
When hovered, the image zoom in and show more clear.

css4

More considers about mobile application, it's useful to make it responsive.
When applying to phone screen size 960px width, the animation and absolute position should be changed slightly.
When hovering,the image animates the numbers of x axis , y axis and scales.
When hovering,the two lines animate to the middle of the outer border.