Shulou(Shulou.com)06/02 Report--

What this article shares to you is about the Hover effect in the Web page, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Bring vitality to the insipid site

The hover effect can add some dynamic effects to the web page and make the site more dynamic. The original approach was to use javascript to achieve these dynamic effects, but with the introduction of CSS3 and the support of modern browsers, we can achieve these interesting effects in pure CSS code. The so-called modern browser, more refers to the Mozilla and Webkit as the core browser, the performance of IE is slightly less satisfactory, so please use FireFox,Safari or Chrome to see the effect. Here are five cool pure CSS hover effects to be introduced.

Jump up

This effect is ideal for scenes where there is a horizontal picture on the page, which produces a wavy effect when the mouse is hover.

This effect is very simple to achieve, and there are many ways to achieve, the following core implementation method is: initially set mergin to all images, when hover, reduce the value of mergin to the corresponding images, so as to achieve the effect of jumping up.

This effect can be applied not only to pictures, but also to horizontal navigation bars.

Transparency in the effect is not necessary, not setting the transparency attribute does not affect the jump effect in hover, plus transparency is just to make the effect smoother.

CSS Code:

.ex1 img {border: 5px solid # ccc; float: left; margin: 15px;-webkit-transition: margin 0.5s ease-out;-moz-transition: margin 0.5s ease-out;-o-transition: margin 0.5s ease-out;} .ex1 img:hover {margin-top: 2px;}

View Demo

Cascading and magnification

This effect is similar to the lava lamp effect, where each image is slowly enlarged and restored to its original state as the mouse moves from top to bottom.

To achieve this effect, first zoom out when the original image is displayed, and enlarge the size of the image when you hover the mouse.

Because the picture is centered, the margin of the picture is also added when the mouse hover, so that when the picture is enlarged, it is also centered.

CSS code

/ * Example 2s / # container {width: 300px; margin: 0 auto;} # ex2 img {height: 100px; width: 300px; margin: 15px 0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;} # ex2 img:hover {height: 133px; width: 400px; margin-left:-50px;}

View Demo

Text fade in

A similar effect is typically achieved in JavaScript, where one element changes when one element is hover. To achieve this effect, this example first puts the picture and text in a div, and then sets the color:transparent and line-height:0px of the div. When hover, change the color and line-height properties so that the text is displayed.

CSS code

# ex3 {width: 730px; height: 133px; line-height: 0px; color: transparent; font-size: 50px; font-family: "HelveticaNeue-Light", "HelveticaNeue Light", "HelveticaNeue", Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease -o-transition: all 0.5s ease;} # ex3:hover {line-height: 133px; color: # 575858;} # ex3 img {float: left; margin: 015px;}

View Demo

Rotated picture

This effect is very easy to achieve, but because it is a very important effect, especially for thumbnails in galleries. We use some newer CSS styles in this effect. This example uses box-shadows,transitions and transforms. Transform is the rotation part, and transition is to make the effect smoother.

CSS code

# ex4 {width: 800px; margin: 0 auto;} # ex4 img {margin: 20px; border: 5px solid # eee;-webkit-box-shadow: 4px 4px 4px rgba;-moz-box-shadow: 4px 4px 4px rgba; box-shadow: 4px 4px 4px rgba;-webkit-transition: all 0.5s ease-out -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;} # ex4 img:hover {- webkit-transform: rotate (- 7deg);-moz-transform: rotate (- 7deg);-o-transform: rotate (- 7deg);}

View Demo

Fade in and reflect

This effect is a relatively complex effect, first of all, set to reduce the initial transparency of the image, when hover, set the transparency back to the default value, and there will be an image edge glowing effect and reflection effect (only works in browsers with Webkit as the core).

If you don't know much about reflection effects, you can refer to this article (Image Reflections with CSS)

CSS code

# ex5 {width: 700px; margin: 0 auto; min-height: 300px;} # ex5 img {margin: 25px; opacity: 0.8; border: 10px solid # eee; / * Transition*/-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease / * Reflection*/-webkit-box-reflect: below 0px-webkit-gradient (linear, left top, left bottom, from (transparent), color-stop (.7, transparent), to (rgba);} # ex5 img:hover {opacity: 1 / * Reflection*/-webkit-box-reflect: below 0px-webkit-gradient (linear, left top, left bottom, from (transparent), color-stop (.7, transparent), to (rgba); / * Glow*/-webkit-box-shadow: 0px 0px 20px rgba;-moz-box-shadow: 0px 0px 20px rgba; box-shadow: 0px 0px 20px rgba

View Demo

Summary

After testing, these effects are the best on browsers with Webkit as the core, followed by Mozilla and IE. If you want to make the effect in IE9 better, you need other third-party JS libraries. The above five pure CSS hover effects should give you some design inspiration, you can combine these CSS styles, and add some other CSS to produce some interesting effects. If you also have some cool CSS effects, you are welcome to participate in the discussion.

The above five CSS Hover effects all apply the CSS3 effect, in modern browsers, the application of these CSS can show a very beautiful effect. It is worth mentioning that IE9,IE9 does not support the two effects of transition and transform, which makes these five effects perform poorly under IE9, so pin your hopes on IE10.

These are the Hover effects in the Web page, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.