Detailed description of the method of realizing product cover image to float upward using css

This article describes how to realize the touch-up floating of the product cover image in css floating. If you don’t know how to realize the touch-up floating of the product cover image in css, let’s take a look at this article! ,

Today when writing CSS, I need to realize: when the mouse hovers over the hyperlink composed of pictures and introductions, the durian will float upward.

##My thoughts on achieving this effect are divided into the following steps:

• Mouseover

• Picture moves

• below ElementAbsolute positioning

• Increase transition time

# #1. Mouse hover - add pseudo class selector：hover When the mouse is hovering to change the element style, the first thing that comes to mind is to use a pseudo class selector :hover. The problem I'm having while writing this is that hovering over the hyperlink only makes the image part move, but not the text introduction part. Therefore, when writing a pseudo-class, you cannot write #id a:hover, but should be followed by the class selector of the picture part p, that is, #id a:hover .class {}. This allows you to hover the hyperlink and only move the image.

2. Image movement - change the margin/padding of the element

To make the image move, you need to change the position of the image so that the image position moves up when hovering, then We can change the margin or padding attributes of the element to achieve the purpose of movement

3. The absolute positioning of the element below

Due to the influence of the flow, the movement of the image position will affect the bottom The position of the text introduction and price, that is, the overall movement is upward. In order for it to stay in place, its position should be changed to absolute positioning, no need to go into details.

4. Increase the transition time-transition

In order to make the transition less blunt, you need to increase the transition attribute. However, it should be noted that it is not recommended to add the transition attribute in :hover, because when the mouse moves away, the transition attribute disappears, which makes it too stiff when the mouse moves away. Just add the transition attribute directly to the element that needs to be moved, such as the .class above.

related suggestion:

About the centering of css floating elements

A simple implementation case of the floating left and right sliding effect of page images

The above is the detailed content of Detailed description of the method of realizing product cover image to float upward using css. For more information, please follow other related articles on the PHP Chinese website!