Thread: Help with CSS

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    1
    Rep Power
    0

    Help with CSS


    Hi -

    currently within style.css I have the following:

    .page-item-56 a:hover {border-bottom: 8px solid red; border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;}
    .page-item-40 a:hover {border-bottom: 8px solid green; border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;}
    .page-item-49 a:hover {border-bottom: 8px solid blue;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;}
    .page-item-76 a:hover {border-bottom: 8px solid orange;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;}

    This means when I rollover page-item-40 a GREEN line appears below the word CONTACT.


    How do I also make an image appear above the word CONTACT -

    so, when I rollover the word CONTACT I would like a speech bubble image to appear with contact information, as well as the current green line. Any help greatly appreciated..



    thanks

    Ian
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    you can try to give the link some height and setting a background.


    Code:
    a.button{
       display:block; /* or inline-block */
       height: 100px;
       width: 200px;
    }
    a.button:hover{
    background: url('../images/button.png') no-repeat;
    }
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    862
    Rep Power
    275
    why not just use the title attribute with your anchor/link tag to create a nice little tooltip style pop-up whenever someone hovers the cursor over that link?

IMN logo majestic logo threadwatch logo seochat tools logo