Pure CSS Rollover Needed

HTML & CSS
1

I have an image that is using javascript to replace the main image on the left when you rollover it, but I am wanting to use CSS only to achieve this effect. Can someone help me out? And is there anyway to use just one image for the initial state and then use CSS to make the image dim or darken (opacity) as well as add the text “View Gallery” on top of the same initial image? Here is the page in question…

LINK-
http://www.michellehunley.com/

2

One easy way to do it with CSS would be to use a “sprite” background image instead of an image in the HTML. Give a width and height to the <a> and make an image twice the height that contains both image states. On hover, get the background image to move up to reveal the hover state.

3

I don’t think I have done this correctly. Can you take a peek at the temporary url below?

http://www.michellehunley.com/index2.html

4

You’re getting the image hover, but it’s placed wrong. If you look at the bottom left corner, there’s a small box which gets created and changed when the larger image is hovered over. What I think you’ll want to do is:

  1. Get rid of the img inside the fancybox link. Place some text there instead.
  2. Set the width and height of the fancybox class to match the image size you want to use (in your case 400Wx266H).
  3. Set a large negative margin to hide the text. Or do a search for one of the many image replacement techniques that are out there…
5

That does the trick. I guess I was not thinking to remove the image and place the text. for some reason I wanted to leave the photo for the fancy box, not thinking that the class was applied to the anchor and not the text itself. Thanks for both of your tips DaveMaxwell and ralph.m!

6

I am new to this forum but I am seeking some help with my wedding website. I am a novice in webdesign and am brushing off my dreamweaver skills. I noticed Todd’s implementation of the roll over image and then using fancybox to display a gallery. I am trying to do this but rolling over with a white border and then clicking to fancybox’s iframe class to display additional information and/or graphics.

So my question is if there’s a way using css to put a white border around each icon as i roll over or should i use what i have currently and somehow call the fancybox class somehow?

LINK:
www.kirandarren.com

Thanks for your help ahead of time and excuse me for asking “beginner” questions.

7

Hi Darren. Welcome to the forums. :slight_smile:

I’d say it would be much better to have a single image there and have a white border appear on hover via CSS. Then you can use the image gallery in the normal way.

Edit:

O, congratulations, but the way. :slight_smile: