Wordpress css hover

by 7 replies
9
Hi

I just want to share this. I am using sprite images and when I hover it just use the bottom part of the image. This is very handy to speed up your website or blog.

CSS:

#ID {
width: 136px; //SIZE OF THE ONE PART OF THE IMAGE
height: 48px;
background-image: url("THE-IMAGE");
background-position: top; //TOP PART OF IMAGE
display: block; //MAKE THE IMAGE A LINK
}

#ID:hover {
background-position: bottom; //BOTTOM PART OF THE IMAGE
}

HTML:
<a id='ID' href="http://LINK"> </a>


Nice day for all of you
#programming #css #hover #wordpress
  • Does this really work or you trying to make us try this???
    Where should i paste this code??? Can you answer all these then it will be much more helpful for us.
    • [1] reply
    • This code works. I would ask for help if it doesn't work but it work.
      I do not understand what you mean by where the code goes. Insert css into style.css and the html in you webpage.

      The only trick is to get the images to be the same width and double the height.

      Use it or don't use it, it is just info that I want to share!
  • it's called css sprites, this would explain his post graphically and detailed..
    CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks
  • I get the feeling that I must keep information to myself because I don't see the problem to my post. If you don't understand what I am doing ask me then in a nice professional way.

    I am working everyday on css and like to post something that is interesting.

    JohnnyS and jaasmit thank you for the advice I will keep all of this in mind. If one of you need more detail and help on the topic pm me and I'll be glad to help you!
  • Sprites are the best. My website used to take ages to load when I used different links for different images. That solved my problem and improved the loading time dramatically.
    • [ 1 ] Thanks
  • Wow that's awesome man! Never thought about it. Good way for hovering buttons so it doesn't have to load 2 images. Thanks a lot!
    • [ 1 ] Thanks
  • I like this technique as it helps to load hover image instantly
Join the discussion

Next Topics on Trending Feed

  • 9

    Wordpress css hover

    Hi I just want to share this. I am using sprite images and when I hover it just use the bottom part of the image. This is very handy to speed up your website or blog.