CODEWITHSUNDEEP
htmlcssimagecolors
user3259369
user3259369

Reputation: 17

Image Hover Color Change

I'm fairly new to HTML and CSS and for my website, I was attempting to make something of this sort. http://www.gontroller.com/

Needless to say, It's not turning out so well... Here's what I have so far: http://www.cityworksmc.com/possibleindex.html

If someone could lead me in the right direct, I would be very grateful. I've also tried some other codes that I found around the internet, and needless to say, they didn't work so well. Here is one of them.

img.books {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.books:hover {
  filter: none;
  -webkit-filter: grayscale(0%);

I also looked at some of their source code, and it was a little above my head, haha.

Thank you in advance.

Upvotes: 1

Views: 1690

Answers (1)

codeaddict
codeaddict

Reputation: 879

They are using a CSS sprite image for each links background and then moving the background position on hover.

Sprite image

Here is a link to the image http://www.gontroller.com/img/gforums.png

Then the css is like this

#forums a {
  background: url(http://www.gontroller.com/img/gforums.png) no-repeat;
  background-position:center top;
  height:239px;
  width:222px;
}

then on hover they are moving the background position

#forums a:hover {
  background-position: center bottom;
}

Here's a good article on CSS sprites by Chris Coyier http://css-tricks.com/css-sprites/

Upvotes: 2

Related Questions