CSS implementation of the product cover chart upward floating method detailed narration

This article describes how CSS implements the product cover image touch upward floating, do not know how CSS implementation of product cover map touch upward floating students, we look at this article! 、

Today, when you write CSS, you need to do this: when the mouse hovers over a hyperlink made up of pictures and presentations, the durian floats upwards.

When I achieve this effect, my thinking is divided into the following steps:

• Mouse hover

• Picture movement

• Absolute positioning of the elements below

• Increase transition time

1. Mouse hover-Add pseudo class selector: hover

When the mouse hovers over the element style, the first thought is to use the pseudo-class selector: hover. The problem with writing here is that hovering over a hyperlink only makes the part of the picture move, while the text Description section does not move. Therefore, when writing pseudo-class can not be written as #id a:hover, but should be added later in the section P class selector, that is, #id a:hover. class {}. This enables hyperlinks to hover and only move pictures.

2. Picture movement-Changing the margin/padding of the element

To make the picture move, is to change the position of the picture, so that hover when the picture position up, then we can change the element's margin or padding property, in order to achieve the mobile purpose

3. Absolute positioning of the element below

Due to the influence of the flow, the position of the picture will affect the position of the following text and price, that is, the whole move upward. In order to keep it in place, its position should be changed to absolute positioning, no longer repeat.

4. Increase the transition time-transition

To make too much less blunt, you need to increase the transition property. However, it is important to note that it is not proposed to add the transition attribute in the: hover because the transition property disappears when the mouse is moved away, so that it appears too stiff when the mouse is moved away. Simply add the transition attribute directly to the element you want to move, such as the. class above.

Related recommendations:

About the center of a CSS floating element

Page picture floating left and right sliding effect of simple implementation case