HTML/CSS Help!

[Peeeeeeeeeeynk]

Hi guys I wanna ask a question on how can you replicate this effect like when you hover on a logo the color changes for example this site when you hover the logo on the top left, the colors change http://designmodo.com/.

May I ask on how do you achieve this?

 

Thanks in advance!

[Unknown_Guy]

http://www.w3schools.com/cssref/sel_hover.asp ?

[Hazy125]

Ok, what you want is the hover CSS property. Take the example below. We have a div with an ID of "lol" and we are applying CSS to that div that changes the font colour to orange and the background colour to blue. Then when we target the same div with a :hover appended to it, it reverses the colours. Rather than colours, you could have a background image and on hover you can change the image. Things like that.

<div id="lol">This is a div, but this can really be anything to be honest. This can also be an image, like that logo, that changes using the hover thingy</div>

#lol{	color: orange;	background-color: blue;}#lol:hover{	color: blue;	background-color: orange;}

Note that you cannot use :hover as inline css

[Lumi]

Ok, what you want is the hover CSS property. Take the example below. We have a div with an ID of "lol" and we are applying CSS to that div that changes the font colour to orange and the background colour to blue. Then when we target the same div with a :hover appended to it, it reverses the colours. Rather than colours, you could have a background image and on hover you can change the image. Things like that.

<div id="lol">This is a div, but this can really be anything to be honest. This can also be an image, like that logo, that changes using the hover thingy</div>

#lol{	color: orange;	background-color: blue;}#lol:hover{	color: blue;	background-color: orange;}

Note that you cannot use :hover as inline css

And to make it a smooth transition he should  add

 

-moz-transition: all .3s ease;

-webkit-transition: all .3s ease;

-o-transition: all .3s ease;

transition: all .3s ease;

 

to #lol

 

Also OP it doesn't need to be an ID you can use a class or element for this.