dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Problem showing additional image on hover

Hybrid View

  1. #1
    Join Date
    Mar 2012
    Posts
    6

    Problem showing additional image on hover

    I've been searching the web for this and can't find an answer other than using JS to do this:

    I have a <div> image on a web page, and every time I hover over that image, I want another image to appear under it. When I try this with CSS I get flickering and the original image moves down with it.

    Any help would be appreciated!

    <style type="text/css">
    }
    #showPic
    {
    position:absolute;
    z-index:1;
    }
    #showPic:hover
    {
    margin-top:100px;
    display: block;
    width: 200px;
    height: 200px;
    background-image: url(IMAGE URL);
    background-repeat: no-repeat;
    background-position:absolute;
    visibility:visible;
    {
    </style>
    <div id="showPic">
    <img src="IMAGE URL">
    </div>

  2. #2
    Join Date
    Mar 2012
    Posts
    6
    Ok I figured it out. Here's the code that worked:

    <style type="text/css">

    #sBux .hov
    {
    position:absolute;
    top:0px;
    left:0px;
    }

    #sBux:hover
    {
    margin-top:100px;
    display:block;
    width: 200px;
    height: 200px;
    background-image:url(IMAGE URL);
    background-repeat: no-repeat;
    background-position:absolute;
    visibility:visible;
    }
    </style>

    <div id="sBux">
    <img class="hov" src="IMAGE URL">
    </div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles