SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pure CSS Rollover Needed

    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/
    Todd Temple > T2 Design

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Todd Temple > T2 Design

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,286
    Mentioned
    121 Post(s)
    Tagged
    1 Thread(s)
    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....
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Todd Temple > T2 Design

  6. #6
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi Darren. Welcome to the forums.

    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.


Tags for this Thread

Bookmarks

Posting Permissions

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