Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Location
    Pakistan
    Posts
    8
    Thanks
    7
    Thanked 0 Times in 0 Posts

    CSS - How to Call Images with Hover in a DIV

    I have 4 images A B C D

    when i hover A thumbnail it shows an image in div
    when i hover B thumbnail it shows an image replace by B image in same div
    when i hover C thumbnail it shows an image replace by C image in same div
    Simply:
    Same div change images with hovering on thumbnail.
    Last edited by webinstructor; 03-22-2012 at 12:57 PM. Reason: matter resolved.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,696
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there webinstructor,

    here is an example that works in browsers that render CSS background-size...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>CSS swap image</title>
    
    <style type="text/css">
    body {
        -webkit-animation: bugfix infinite 1s;  /* Safari adjacent sibling bug fix */
        background-color:#f0f0f0;
     }
    @-webkit-keyframes bugfix {                /* Safari adjacent sibling bug fix */
        from { padding: 0; } to { padding: 0; } 
     }
    #container {
        position:relative;
        width:516px;
        height:412px;
        padding:12px;
        border:1px solid #222;
        margin:20px auto;
        background-color:#555;
        box-shadow:#333 10px 10px 20px;
     }
    #a {
        position:absolute;
        width:514px;
        height:318px;
        border:1px solid #f00;
        top:10px;
        background-image:url(blood.jpg);
        background-size:100% 100%;
        box-shadow:#222 4px 4px 8px;
     }
    #b,#c,#d,#e {
        position:absolute;
        width:118px;
        height:78px;
        border:1px solid #000;
        top:342px;
        background-image:url(buddha.jpg);
        background-size:100% 100%;
        box-shadow:#222 4px 4px 8px;
        cursor:pointer;
     }
    #c  {
        left:142px;
        background-image:url(autumn.jpg);
     }
    #d  {
        left:274px;
        background-image:url(col.jpg);
     }
    #e  {
        left:406px;
        background-image:url(avenue.jpg);
     }
    #b:hover,#c:hover,#d:hover,#e:hover { 
        opacity:0.6;
     }
    #b:hover+div+div+div+div {
        background-image:url(buddha.jpg);
        border-color:#fef47a;
     }
    #c:hover+div+div+div {
        background-image:url(autumn.jpg);
        border-color:#f93;
     }
    #d:hover+div+div {
        background-image:url(col.jpg);
        border-color:#6785b7;
     }
    #e:hover+div {
        background-image:url(avenue.jpg);
        border-color:#91a81d;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
     <div id="b"></div>
     <div id="c"></div>
     <div id="d"></div>
     <div id="e"></div>
     <div id="a"></div>
    </div>
    
    </body>
    </html>
    
    If older browsers are a concern, then you would need to give your thumbnails and full size images the appropriate dimensions.

    coothead

  • Users who have thanked coothead for this post:

    webinstructor (03-22-2012)

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Location
    Pakistan
    Posts
    8
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Thankyou Soooooo Much

    Thanks Thanks Thanks


    best regards

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,696
    Thanks
    0
    Thanked 232 Times in 227 Posts
    No problem, you're very welcome.
    coothead


  •  

    Tags for this Thread

    Posting Permissions

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