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

    Join Date
    Dec 2013
    Posts
    14
    Rep Power
    0

    I need help with my css code


    So here's my code:
    Code:

    <div class="thumbnail-item">
    <a href="#"><img src="/images/image1.gif" class="thumbnail" /></a>
    </div>

    So I need a CSS code which can do the following:
    -When the user hovers the image it gets changed (image1.gif -> image2.gif)
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    253
    Rep Power
    87
    Hi there ayanhostingg,

    here is an example of a more modern method of image swapping...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>single image rollover example</title>
    
    <style>
    body {
        background-color:#f0f0f0;
     }
    .thumbnail-item a {
        position:relative;
        display:block;
        width:100px;
        height:100px;
        border:1px solid #000;
        margin:auto;
        font-size:10px;
        box-shadow:5px 5px 5px #666;
     }
    .thumbnail-item span {
        position:absolute;
        width:100px;
        height:100px;
        top:0;
        left:0;
        background-image:url(http://www.coothead.co.uk/images/single_image_rollover.gif);
     }
    .thumbnail-item span:hover {
        background-position:-100px 0;
     }
    </style>
    
    </head>
    <body>
    
    <div class="thumbnail-item">
     <a href="#">some text<span></span></a>
    </div>
    
    </body>
    </html>
    Further reading:-

    coothead
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    3
    Rep Power
    0
    I would use mouseovers in javascript instead. Unfortunately I can't post a link to an example as I am a new member.

    Comments on this post

    • DonR disagrees : no need to use javascript when CSS will work just fine

IMN logo majestic logo threadwatch logo seochat tools logo