9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

Wordpress css hover

by Jdunhin
7 replies
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
#css #hover #wordpress
  • Profile picture of the author jaasmit
    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.
    {{ DiscussionBoard.errors[6685807].message }}
    • Profile picture of the author Jdunhin
      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!
      Signature

      We handle all your WordPress Content,Theme and Plugins updates!
      iAdminWP

      {{ DiscussionBoard.errors[6687499].message }}
  • Profile picture of the author JohnnyS
    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
    {{ DiscussionBoard.errors[6688013].message }}
  • Profile picture of the author Jdunhin
    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!
    Signature

    We handle all your WordPress Content,Theme and Plugins updates!
    iAdminWP

    {{ DiscussionBoard.errors[6688334].message }}
  • Profile picture of the author TimeTravelAgent
    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.
    {{ DiscussionBoard.errors[6689024].message }}
  • Profile picture of the author anconsoft
    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!
    {{ DiscussionBoard.errors[6689314].message }}
  • Profile picture of the author wordpressmania
    I like this technique as it helps to load hover image instantly
    Signature
    {{ DiscussionBoard.errors[6702181].message }}

Trending Topics