Pure CSS3 to achieve image display effects_html/css_WEB-ITnose

The pure CSS3 image display special effects to be implemented in this article could only be implemented using JavaScript before. It is conceivable that it will be subject to many limitations, especially performance. Today we will use simple CSS3 code to implement it, and you will find that its animation effect is extremely smooth with the help of modern browsers.

Watch the demo

HTML code

Through the above demo, you may have guessed that its HTML result should be in a parent element Contains multiple sub-elements, that’s right: an ol and its sub-element li are used here.

CSS code

The action to be implemented by the CSS code Just make the width change when the mouse is hovered.

A few very simple pieces of CSS code can achieve the actions we require, but there are a few things to note here:

It is best to set overflow-x: hidden; to avoid strange effects.

We use two transition-attributes to control the width of the image display. Initially, it is displayed in half. When the mouse hovers over an image, the width increases.

Here we only use a few pictures, but the number of pictures is not limited.

Watch the demo

Text from: http://www.webhek.com/css-kwicks