SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Jul 2002
    Location
    space
    Posts
    845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pure CSS Image Hover

    Hello,

    I have some images with a snippet of text below each image. For each one, the image and text are a single link.

    Here is an example:
    2014_01_11_160742.png

    I want to make it so that when the mouse cursor hovers over either the image or the text, the image changes to a different color. I already created two versions of the images, but am now looking for some code for the hover effect.

    Any help is appreciated.

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    The easiest way is to give the <a> some padding and make it a background image, which you can then change on :hover and :focus.

    So your HTML will be nice and simple:
    HTML Code:
    <p>
    <a href="one.htm">One</a>
    <a href="two.htm">And here's the second one</a>
    </p>
    and your CSS will be along the lines of:
    Code CSS:
    a {display:inline-block; padding-top:30px; margin:1em; min-width:30px; background-position:top; background-repeat:no-repeat; text-align:center;}
    a:link, a:visited {background-image:url('normal.png');}
    a:hover, a:focus {background-image:url('hover.png');}
    (dimensions chosen for a 2525px image).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •