How can I hold original position when I hover zoom an image?

[barney_1]

Hi Folks,

I want to display three pictures side by side and have the ability to hover-zoom them. My problem is that with the code I have now, when I hover and the larger picture is displayed, the smaller floating picture is no longer present so the page alignment "jumps" to fill the void.

How can I hold this place in the page? Also, if possible, can I display the captions with the larger image?

<div id="content">
<div class="picwide">
<img src="images/pic1.jpg">
<p><h4>Caption 1</h4></p>
</div>
<div class="picwide">
<img src="images/pic2.jpg">
<p><h4>Caption 2</h4></p>
</div>
<div class="picwide">
<img src="images/pic3.jpg">
<p><h4>Caption 3</h4></p>
</div>
</div>

#content div.picwide {
float: left
}

#content div.picwide img {
width: 150px;
height: 100px;
}

#content div.picwide img:hover {
position: absolute;
overflow: visible;
width: 300px;
height: 200px;
}

[vtjustinb]

It jumps because you change the positioning to absolute which takes the image out of normal flow (essentially like it doesn't exist on the page).

What I would suggest would be changing that to position: relative, which leaves the whitespace in-tact. This will cause the text below the image to actually be pushed down when it resizes, so you'll want to apply negative margins to accomodate for the difference in size. IE since you increased the height by 100px you might want to put a margin-bottom of -100px to keep the text from beingh pushed down.

Also make sure you note that IE6 doesn't support hover states on anything but anchors, so those users won't get that effect unless you put it on an anchor.

[effpeetee]

http://www.exitfegs.co.uk/steve.html

Is this anything like what you want?

Frank

[vtjustinb]

Here's a live example of what I was talking about:

http://just-in.org/etc/resize.html

This example goes through the various changes different positioning has on the resize, and the last method (relatively-positioning with negative margins) is what you're after. Just hover over the blue box to get the effect. The accompanying CSS is in the file itself.

[barney_1]

jtjustinb thanks!

I changed from Absolute to Relative position and adjusted the left and bottom margins negatively to match the change in picture position. Code posted below.

Is there an easy way to have the CSS take the caption with the larger image? To match IE6 standards can I just wrap each <img /> in a <a href></> that points to the picture file?

This is the only part of the css code I changed so far:
#content div.picwide img:hover {
position: relative;
overflow: visible;
width: 300px;
height: 200px;
margin-right: -150px;
margin-bottom: -100px;
background: #006699;
padding: 4px;
}

[vtjustinb]

Is there an easy way to have the CSS take the caption with the larger image?

Yes. It's a little more complicated, but check here: http://just-in.org/etc/resize2.html

Essentially you want to use the anchor to wrap both the image and the caption, so that when the image resizes it moves the caption with it. You'd have to do your own edits to the CSS to make sure the right backgrounds were set, and obviously the rules should use "img" instead of "div" but you get the picture.

To match IE6 standards can I just wrap each <img /> in a <a href></> that points to the picture file?

Yes that's what you'd want to do.

[barney_1]

When wrapping these pictures so that the hover function gets picked up in IE6, would it be and acceptable practice to use <a></a> with no href="whatever" or is that a bad idea? I don't need these to go anywhere, I just want it to function with that browser too.

[vtjustinb]

Well, it's not the worst thing you could possibly do, but it definitely isn't very clean from a markup point of view. Generally if you need a blank href for something, you probably aren't writing the most semantically-appropriate markup you could .

The cleanest approach would be to use unobtrusive javascript to add onmouseover events to divs that hold the image and caption so that the effect is entirely behavioral and IE6 supports JS performing the CSS change. Obviously users without JS turned on would not get the effect, but then there'd be no errant links to nowhere on your page.

[barney_1]

So, if I don't wrap it with an anchor tag, worst case scenario, no zooming images for IE6 users?

Thank you so much for all your help. I have been going over your example and applying it to my css but I am have great difficulty. Three things:

Captions are not moving
Large photos are now showing up beneath the pictures and text they are encompasing when enlarged.
Large pictures used to expand from the top-left corner and get bigger toward the bottom right. This now starts on top-right and enlarges in the bottom-left direction. Is this controllable?



<div id="content">
<div class="picwide">
<a href="#">
<img src="images/pic1.jpg" title="picture 1" />
<p><h4>Caption 1</h4></p>
</a>
</div>
<div class="picwide">
<a href="#">
<img src="images/pic2.jpg" title="picture 2" />
<p><h4>Caption 2</h4></p>
</a>
</div>
<div class="picwide">
<a href="#">
<img src="images/pic3.jpg" title="Picture 3" />
<p><h4>Caption 3</h4></p>
</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


#content div.picwide {
float: left
}

#content div.picwide img {
width: 150px;
height: 100px;
}

#content div.picwide a:hover {
position: relative;
}

#content div.picwide a:hover img {
overflow: visible;
width: 300px;
height: 200px;
margin-left: -150px;
margin-bottom: -100px;
background: #006699;
padding: 4px;
}

[barney_1]

I should also mention that there is some inheriting going on too:


#content p {
clear: both;
}

#content h4 {
font-size: .75em;
text-align: left;
color: #666666;
}

#content img {
width: 255px;
height: 217px;
float: left;
padding: 2px;
border: 1px black solid;
margin: 4px;
}

[vtjustinb]

I should also mention that there is some inheriting going on too:


#content p {
clear: both;
}

#content h4 {
font-size: .75em;
text-align: left;
color: #666666;
}

#content img {
width: 255px;
height: 217px;
float: left;
padding: 2px;
border: 1px black solid;
margin: 4px;
}

Yeah those floating images would mess things up with the caption since they need to technically be cleared.

Also, you shouldn't child your <h4> under a <p> tag that's a bit redundant.

[barney_1]

Well, I seem to have gotten it to work pretty well. I was getting hung up because I kept trying to change the margins of IMG and not of the DIV that was enclosing both image and caption.

One more question: the large images are still expanding from the upper right corner toward the lower left corner of the smaller image. Is this controllable? (can be flipped so it moves from upper-left to lower-right?)

Couldn't have done this without help from vtjustinb, thanks!

Solution:

<div class="picwide">
<img src="images/pic1.jpg" title="image title 1" />
<h4>Caption 1</h4>
</div>
<div class="picwide">
<img src="images/pic2.jpg" title="image title 2" />
<h4>Caption 2</h4>
</div>
<div class="picwide">
<img src="images/pic3.jpg" title="image title 3" />
<h4>Caption 3</h4>
</div>


#content .picwide {
float: left
}

#content .picwide h4 {
padding: 2;
margin: 0 7px 7px 7px;
}

#content .picwide img {
float: none;
width: 150px;
height: 100px;
}

#content .picwide:hover {
background: #006699;
position: relative;
margin-left: -154px;
margin-bottom: -104px;
}

#content .picwide:hover h4 {
background: #006699;
color: white;
}

#content .picwide:hover img {
width: 300px;
height: 200px;
margin-bottom: 0;
background: Silver;
padding: 4px;
}