Member Avatar for mariko

I want an image to "get bigger" when a mouse hovers over it. I've looked at some coding that uses CSS and HTML, and I'd need an source image that has both the small image and the large image. I don't understand how to set the CSS so that it actually picks up the image. Is there a better way or am I doing this correctly? I don't want to use javascript. One image is 500px by 655px and the other is 100px by 130px so the source image can either be 600px by 655px or 500px by 785px.


CSS

.rollover a {
display:block;
padding:10px 10px 10px 7px;
background: url("rollover-image.gif") 0 0 no-repeat;
}
.rollover a:hover {
background-position: 0 -35px;
}


HTML

<div class="rollover">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
</div>

  • 2 Contributors
  • 2 Replies
  • 92 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by mariko

Dani AI

Generated

Two quick fixes that will make this work and a cleaner alternative.

First, the immediate bugs in the examples: your CSS targets an anchor with a class but your HTML uses an id on the DIV and the anchor has no class — the rule never runs. Also background-position cannot include no-repeat; use background-repeat: no-repeat or the full background: shorthand. When the element is not the size of the preview frame you will see the whole sprite, so set the element width/height to the preview size and use overflow: hidden. Finally, when the stylesheet is external remember that url(...) in CSS is resolved relative to the stylesheet file, not the HTML file — check the Network panel for 404s.

Sprite (CSS-only) approach — set the element to the small frame size and shift the background on hover:

.sprite-thumb {
  display:inline-block;
  width:100px;   /* preview width */
  height:130px;  /* preview height */
  background-image:url('../images/sprite.jpg');
  background-repeat:no-repeat;
  background-position:0 -130px; /* show small frame */
  overflow:hidden;
}
.sprite-thumb:hover {
  background-position:0 0; /* show large frame */
}

Modern alternative (simpler, no sprite): scale the actual image with CSS transforms. This avoids sprite math and is easy to debug. Use a higher-resolution source if you need the enlarged version to stay crisp.

.thumbnail { display:inline-block; width:100px; overflow:hidden; }
.thumbnail img { display:block; width:100%; transition:transform .2s; transform-origin:center; }
.thumbnail:hover img { transform:scale(2); }

Note: is right that swapping images on hover works, but sprites or transforms are usually preferable now (fewer requests, smoother transitions). Use DevTools to inspect computed styles and network requests if the image still doesn't appear.

Recommended Answers

All 2 Replies

Member Avatar for drjohn

just change the image used in the hover bit

background: url("rollover-image2.gif") 0 0 no-repeat;

Member Avatar for mariko

I can adjust the code to an extent, but I can't make the image appear when I use an external css stylesheet. Even when I can make it appear by using internal css script, I can't pull up only a piece of the source image-the whole thing comes up. I think that I'm missing the code that references the style.css page. Can you tell me what I'm missing and/or doing wrong?

I have this in the header:

<link href="style.css" rel="stylesheet" type="text/css">

And in the body I have this:

<div id="rollover">
<a href="#">Item 1</a>
</div>

The CSS code I saved as style.css and it looks like this:

a.rollover {
    display: block;
    width: 500px;
    height: 785px;
    background: url("PonAndZiTwo.jpg") 0 -655px no-repeat;
    }

a.rollover:hover {
    background-position: 0 0 no-repeat;
    }
Edited by mike_2000_17 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.