dantezeppelin Posted January 8, 2013 Share Posted January 8, 2013 my pics flutter and the small ones move down the page when I hover. Here again is my CSS and also the page I'm trying to fiximg.small {border: none; text-decoration:none}div#sizes a img.large {height: 0; width: 0; border-width: 0}div#sizes a:hover img.large { height: 389px; width: 500px; border:none}p {color: red}.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Wyo/ND</title><script type="text/javascript">function scrollColor() {styleObject=document.getElementsByTagName('html') [0].stylestyleObject.scrollbarFaceColor="#ffb573"styleObject.scrollbarTrackColor="#ff8429"}</script><link rel="stylesheet" type="text/css" href="PicPop.css"></head><body style= "background-color:orange" onload=scrollColor()><a href="MacDonald.html"><img src="http://images.cooltext.com/2874847.png" width="1000" height="223" alt="Wyo/ND" /></a><div id="frame"><p>Hover over each photo to enlarge it into this frame.</p></div><div id="sizes"><p><a><img class="small" src="mac10.jpg" width="150" height="110" alt="Jeanette" /><img class="large" src="mac10.jpg" width="150" height="110" alt="Jeanette" /></a></p><p><a><img class="small" src="mac11.jpg" width="150" height="110" alt="robnCathy" /><img class="large" src="mac11.jpg" width="150" height="110" alt="robnCathy" /></a></p><p><a><img class="small" src="mac12.jpg" width="150" height="110" alt="seattle 3" /><img class="large" src="mac12.jpg" width="150" height="110" alt="seattle 3" /></a></p><p><a><img class="small" src="mac13.jpg" width="150" height="110" alt="seattle 3" /><img class="large" src="mac13.jpg" width="150" height="110" alt="seattle 3" /></a></p><p><a><img class="small" src="mac14.jpg" width="150" height="110" alt="seattle 3" /><img class="large" src="mac14.jpg" width="150" height="110" alt="seattle 3" /></a></p><p><a><img class="small" src="mac15.jpg" width="150" height="110" alt="seattle 3" /><img class="large" src="mac15.jpg" width="150" height="110" alt="seattle 3" /></a></p><p><a><img class="small" src="mac16.jpg" width="150" height="110" alt="seattle 3" /><img class="large" src="mac16.jpg" width="150" height="110" alt="seattle 3" /></a></p><p><a><img class="small" src="mac17.jpg" width="150" height="110" alt="seattle 3" /><img class="large" src="mac17.jpg" width="150" height="110" alt="seattle 3" /></a></p></div><br style="clear: all" /><p>Return to <a href="MacDonald.html">MacDonald Family Events</a>.</p></body></html> Link to comment Share on other sites More sharing options...
knystrom18 Posted January 11, 2013 Share Posted January 11, 2013 Try this: CSS div#sizes img {position: relative;}div#sizes img:hover {width: 500px;height: 389px;vertical-align: top;} HTML: <div id="sizes"><img src="mac10.jpg" width="150" height="110" alt="Jeanette" /><br /><img src="mac11.jpg" width="150" height="110" alt="robnCathy" /><br /><img src="mac12.jpg" width="150" height="110" alt="seattle 3" /><br /><img src="mac13.jpg" width="150" height="110" alt="seattle 3" /><br /><img src="mac14.jpg" width="150" height="110" alt="seattle 3" /><br /><img src="mac15.jpg" width="150" height="110" alt="seattle 3" /><br /><img src="mac16.jpg" width="150" height="110" alt="seattle 3" /><br /><img src="mac17.jpg" width="150" height="110" alt="seattle 3" /></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now