Home > Developer > Web Develop
Everyone good friends, I am a flower show open, of course, we can also call me Mo mo. Today this article, I will hand in hand to lead you to develop a mouse over the picture when the animation effect. Here I will not give you a case of source download, but I can guarantee that, as long as you follow my ideas, step by step to copy the code to the local, will certainly get the same effect. I hope you understand my intentions. Okay, no nonsense, go straight to today's theme.
In today's case, I prepare 3 pieces of material, a background map, two landscape pictures. You can download it on the Internet.
Before I write the code, I'll show you the animation effects.
Mouse over before:
As the mouse moves across the picture, the picture will gradually lighten:
We can also see from the above two comparison pictures, the effect is: when the mouse across the picture, from the inside out gradually variable.
Well, let's start today's actual combat journey.
First we first write the HTML code, the following highlighted style name is what we focus on today:
<!DOCTYPE HTML> <HTML><Head><MetaCharSet= "Utf-8″><Linkrel= "stylesheet"href= "Styles_2014080702.css"><Metaname= "keywords"content= "Css,css3, mouse over animation effect, CSS3 actual combat development, CSS3 case"/><title>CSS3 effect when mouse over picture (1)</title></Head><Body><Divclass= "Container"><Divclass= "Photowall"><Divclass= "Photoview"><ahref= "http://www.itdriver.cn"><imgsrc= "Img01.jpg"width= "320″Height= "200″/></a><Divclass= "Mask"></Div></Div><Divclass= "Photoview"><ahref= "http://www.itdriver.cn"><imgsrc= "Img02.jpg"width= "320″Height= "200″/></a><Divclass= "Mask"></Div></Div></Div></Div></Body></HTML>
According to the above, we can probably know which div to apply the style to:
1. Press the background paper for the wall;
2. Apply a style to the photo to achieve padding padding;
3. Set up a cover layer;
Well, now that you know what style you need to do, go straight to the style code!
We first set the style for the container, so that the container is centered, and the code is as follows:
*{/*empties all elements inside and outside the margin*/margin:0;padding:0;}Html,body,.container{/*Set Container height browser adaptive*/Height:100%;}. Container{/*Setting the container container style*/width:80%;margin:Auto;padding:10px;}
Next, we apply the style to the photo wall, put the wallpaper on it, and set its height to 500px, the code is as follows:
. Photowall { background:URL (bg.png)/* set photo wall background */ background-size :cover; /* set background to fill with minimum values */ Height:500px/* Set the altitude of the photo wall */}Let's take a look at how this page works:
Now we apply the CSS3 Box model property to center the photo in both vertical and horizontal directions, as shown in the following code:
. Photowall{background:URL (bg.png);/*set photo wall background*/background-size:cover;/*set background to fill with minimum values*/Height:500px;/*set the height of the photo wall*/Display:-webkit-box;/*Application Box Model*/Display:-moz-box;Display:-o-box;Display:Box;-webkit-box-pack:Center;/*Center The elements in the box horizontally*/-moz-box-pack:Center;-o-box-pack:Center;Box-pack:Center;-webkit-box-align:Center;/*Set the center space of the element in the box vertically*/-moz-box-align:Center;-o-box-align:Center;box-align:Center;}
Next, we add a shadow effect to the photo and set the inner border of the photo, with the following code:
. Photowall. Photoview{/*apply a style to a photo frame*/padding:6px;background:#FFFFFF;margin:0 10px;position:relative;Overflow:Hidden;/*Hide the overflow content*/Box-shadow:2px 2px 6px Black;/*apply a shadow effect to a photo frame*/}
How does it work at this time?
OK, the whole thing has come out, now let's add effect to the photo!
All we have to do is set up the cover first, as we have set the position:relative for the photo class, and now we can easily change the position of the element with the. Mask by absolute positioning. We should know that when the element is set to position, it is suspended from the standard flow of the document, so we can easily adjust the position of the mask element to achieve the effect of the cover. Now we give the cover. Mask Application effect:
. Photoview. Mask{position:Absolute;/*because the parent container is set to position:relative, child elements can be absolutely positioned relative to the parent container*/Top:60px; Left:120px;Height:120px;/*Setting the width height of the cover*/width:120px;cursor:Pointer;Border-radius:60px;/*a fillet effect is set for the cover, and if the radius= element width is *1/2, the element becomes a circle*/Border-width:60px;Display:Inline-block;Border:60px Solid Rgba (0, 0, 0, 0.7);-moz-box-sizing:Border-box;/*Calculate the width and height of the container in Border-box way*/-webkit-box-sizing:Border-box;box-sizing:Border-box;Opacity:1;/*set the cover to be opaque*/Visibility:Visible;/*set the cover to be visible*/-moz-transform:Scale (4);/*Enlarge 4 times times the size of the cover*/-webkit-transform:Scale (4);-o-transform:Scale (4);-ms-transform:Scale (4);Transform:Scale (4);-moz-transition:All 0.4s ease-in-out;/*when the cover property changes, the smoothing animation is excessive*/-webkit-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;-ms-transition:All 0.4s ease-in-out;transition:All 0.4s ease-in-out;}
If you are not too familiar with the above properties, you can follow my other blog posts, which will be explained in detail. Now let's look at the effect of the operation:
The cover has been translucent and has completely obscured the photo, in which we defined the Transition:all 0.4s ease-in-out; What does this mean?
It actually means that when the style of the. Mask element changes, the animation effect, which is fast and slow, is implemented. The change of the Mask style property.
OK, when the mouse is over the photo, we re-adjust the. Mask Property Style:
/* When the mouse is over the photo, the cloak is set to transparent, and the border is set to 0 to hide the cover */ opacity: 0; border:0px solid Rgba (0,0,0,0.7); Visibility:hidden;}
Now that the code is written, let's take a look at the effect:
Welcome everyone to join the Internet Technology Exchange Group:62329335
Personal statement: share the blog, absolutely original, and strive to each knowledge point through the actual demonstration to verify.Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
