CSS Hover Effect

CSS Hover Effect:

CSS Hover Effect: By hover we mean that the user moves the mouse onto a particular portion, part, text , picture or link of a webpage. It is possible to change the colour and look of webpage segments, paragraphs, Divs, text, boxes and images with CSS hover effects. CSS hover effect can help create following effects on the web elements:

  1. It can change the text colour when mouse is hovered by the user
  2. It can animate the segment in question
  3. It can change the images upon hover
  4. It helps in creating menus where sub menus pop out when the user hovers the mouse onto a list item.

Let us now see a few examples of CSS hover impact:

h1 {color:blue;}

h1: hover {color:red;}

What the above code in effect, below is the result. All h1 headings will appear in blue colour as:

CSS Hover Effects:

When the user hovers the mouse over the h1 text, the text colour will change to red as seen below:

CSS Hover Effects

Similarly, images can also be manipulated with the use of CSS hover effects. Let us assume we want the user to see one picture at page upload and another picture when the user moves the mouse onto the picture displayed. The below code and its result illustrates CSS hover effect for image manipulation:

Before the user moves the mouse onto image:

.imghov{background-image: images/pigeon.jpg;}

After the user moves the mouse on image:

.imghov{background-image: images/HTML.jpg;}



Leave a Reply