How to change image on mouseover using css

Using CSS you can apply many effects to your website. Here I am going to show you one of the effects done by CSS. You see in many websites when you mouse over on button the colour of the button will change which is done by using CSS hover effect. Likewise you can change image using this effect. It is so simple and easy one. For doing this you must know HTML and CSS.

Now your image and html page are ready, then you need CSS where you are going to write code to show mouse over effect. I code CSS for the above html page in that I am using the created image in step 1 as background for that DIV in html page. Here I used TOP and BOTTOM property for background. In normal the top image will show and on mouse over (: hover) bottom image will show. Analyse the below CSS code to get better understanding.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

html,body,div,span,applet,object,iframe,

h1,h2,h3,h4,h5,h6,p,blockquote,pre,

a,abbr,acronym,address,big,cite,code,

del,dfn,em,img,ins,kbd,q,s,samp,

small,strike,strong,sub,sup,tt,var,

b,u,i,center,

dl,dt,dd,ol,ul,li,

fieldset,form,label,legend,

table,caption,tbody,tfoot,thead,tr,th,td,

article,aside,canvas,details,embed,

figure,figcaption,footer,header,hgroup,

menu,nav,output,ruby,section,summary,

time,mark,audio,video{

margin:0;

padding:0;

border:0;

font-size:100%;

font:inherit;

vertical-align:baseline;

}

/* HTML5 display-role reset for older browsers */

article,aside,details,figcaption,figure,

footer,header,hgroup,menu,nav,section{

display:block;

}

body{

line-height:1;

}

ol,ul{

list-style:none;

}

blockquote,q{

quotes:none;

}

blockquote:before,blockquote:after,

q:before,q:after{

content:'';

content:none;

}

table{

border-collapse:collapse;

border-spacing:0;

}

/*****main*****/

.img-holder{

margin:40pxauto;

background:url(image.jpg)no-repeat top;

width:156px;

height:196px;

border:4pxsolid#DF5517;

cursor:pointer;

}

.img-holder:hover{

background:url(image.jpg)no-repeat bottom;

}

p{

text-align:center;

font-size:14px;

}

pa{

color:#DF5517;

}

That’s it you done it successfully. I hope you will use the concept in your website. If you have any doubt or feedback commented it on below.