Skip navigation

Dreamweaver

thefortunecookieguy Calculating status...

Currently Being Moderated

css code for hover and replace image

Mar 10, 2013 10:26 PM

on my page i would like my visitors to hover over a div that contains text and have an image appear, would need to work in most browsers and not disrupt any other div tags on my page. is there some simple css code to do this?

371 Views 3 Replies Latest reply: Nancy O., Mar 11, 2013 11:37 AM

Replies

Currently Being Moderated

1. kennethkawamoto2,

Mar 11, 2013 4:42 AM in reply to thefortunecookieguy

Report

Initially set the display for the <img> to none, then set it to block/inline in the parent <div> :hover rule.

> not disrupt any other div tags on my page

If you mean you want the image to occupy its space even when it's not shown, you can use visibility: visible/hidden instead.

--
Kenneth Kawamoto
http://www.materiaprima.co.uk/

|
Mark as:
Currently Being Moderated

2. MurraySummers,

Mar 11, 2013 5:24 AM in reply to kennethkawamoto2

Report

If you make the image that appears be position:absolute, then it will not disrupt your layout at all when it appears. However, if you do this, you will have to ensure that you have the proper ancestor structure in place so that absolute positioning will adjust properly when the browser viewport changes dimensions (if you are using centering content).

|
Mark as:
Currently Being Moderated

3. Nancy O.,

Mar 11, 2013 11:37 AM in reply to thefortunecookieguy

Report

Disjointed Rollovers:
http://alt-web.com/DEMOS/CSS-Disjointed-Rollover-1.shtml
http://alt-web.com/DEMOS/CSS-Disjointed-Rollover-3.shtml

Nancy O.

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points

Dreamweaver

css code for hover and replace image

Mar 10, 2013 10:26 PM

More Like This

Bookmarked By (0)

Answers + Points = Status