The simplest CSS image flip Effect

Today, a reader asks about the effect of switching an image when making the mouse over. This effect is also called a roll-over effect ). Originally, most of these effects were implemented using Javascript. In fact, CSS can be easily used for making them.

Here is the simplest result. There are a lot of changes in the complex results. Interested readers can study it in depth.

Take a look at this effect. When you move the mouse over the button image, the image will become another one.

Button Text

 

The implementation of this effect is actually very simple. Step 1: Prepare two images with the same size. Here, the image size is X 34 pixels.

 

.

Step 2: Write the HTML code:

1	<a href="#">Button Text</a>

Is a very common hyperlink text, if you want to completely use images instead of any text, you can also.

Step 3: the CSS code is as follows:

12345678910111213141516171819

a:link, a:visited{display:block;width:128px;height:34px;font-size:14px; font-family:Arial;line-height:34px;text-align:center;color:black;text-decoration:none; background:url('background.gif') no-repeat; } a:hover, a:active{background:url('background-hover.gif') no-repeat;color:white; }

Well, this effect is complete, isn't it very simple. The following briefly explains the meaning of CSS code.

1st ~ 14 lines of code define the CSS style when the mouse does not pass through the hyperlink:

First, you need to change element a to a block-level element, and then set its height and width to be the same as that of the image.

The text is placed in the center of the image.

Finally, set the address of the background image.

The following 16th ~ 19 lines of code define the CSS style that needs to be changed when the mouse passes.

Change the color of the text from black to white, and replace the image with another one.

Description and discussion:

1: If the above explanation is not clear, for example, what is "block-level element "? How do I set a background image? These basic CSS settings are not clear yet. It is difficult to say these content in one or two sentences, please take a closer look at the video tutorials on this Site or the book "proficient in CSS + DIV webpage style and layout". It is more important to have a solid foundation than to imitate and make a few achievements.

2: When you experiment with this effect, you may find that this effect currently has a defect. After you move your mouse over the image, it is very likely that the purple image will not appear immediately, it only appears several seconds later. This is because the image has not been downloaded to a local computer, so it is not very good for visitors, the solution is to use the positioning attribute of the background image in the preceding two images to display different regions of the image in normal and hover states, in this way, there will be no such pause.

3: This example can be further improved. In the current practice, the width of the button is fixed. If you want the width of the button to automatically adapt with the length of the text on the button, the "Sliding Door" Technology is required. You can refer to the article "simple application of CSS Sliding Door Technology" to understand the principle of "Sliding Door" and apply it to this example.