Dynamic Pop-up Image

[PCHomepage]

I'm using CSS for mouse-overs to make a larger version of an image appear but I am having trouble getting it to go where it should! They seem to pop up wherever they want. The HTML is:

<a class="thumbnail" href="#thumb"><img src="/images/photoalbums/35/thumbnails/$_19.jpg" width="250" height="188" border="0" /><span><img src="/images/photoalbums/35/$_19.jpg" width="500" height="375"></span></a>

. . . and the CSS is:

.thumbnail {
	position: relative;
	z-index: 49;
}

.thumbnail:hover {
	background-color: transparent;
}

.thumbnail span { /*CSS for enlarged image*/
	background-color: lightyellow;
	padding: 5px;
	border: 1px dashed gray;
	visibility: hidden;
}

.thumbnail span img { /*CSS for enlarged image*/
	position: absolute;
	border-width: 20;
	margin-top: 10px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	float: center;
	clear: all;
	border: 2px solid gray;
	padding: 2px;
	z-index: 50;
	clear: all;
}

.thumbnail:hover span { /*CSS for enlarged image on hover*/
	visibility: visible;
        display: block;
}

Perhaps I've made it overly-complicated and something is cancelling out what's needed!

 

[vacunita]

Its hard to say without knowing what its doing exactly.

But a few things that stand out:

1. There is no such thing as a float:center; only left or right. So that is doing absolutely nothing.
2. You only need to clear floats once. So the second clear is extra and unneeded.
3. Changing the visibility of an element makes its invisible, however it still takes up space on the page, so other elements move to fit it. This may or may not be desirable.
4. Giving the position:absolute to the image means the span will never surround it. Making the span a block element then may cause additional movement of things.
Perhaps giving the absolute position to the span may be a better option.

Also instead of making things invisible, change their display to none, and then to block or inline.











----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[PCHomepage]

I ended up with something that seems to work well enough in IE, Firefox and even Safari on Windows but it does not work in Safari in an iDevice. Any tweeks that will help with the latter?

Although the image refuses to be centered, it does stay totally on the page horizontally and seems to scroll with the page vertically so, other than the iDevice issue which I need to solve, it's fine. On Firefox and IE, the larger image slides in from the left while on Safari, it drops down from the top but that doesn't especially matter. I know there seem to be multiple -webkit-transition and a couple others but when one or the other of the extras is removed, the images jump all over the place so is there a simplification that might stop the oddness while removing the extras?:

a.mouseover-thumbnail-holder {
	position: relative;
	margin-left: 10px;
}

.large-thumbnail-style {
	display: block;
	border: 10px solid #fff;
	box-shadow: 0px 0px 5px #aaa;
}

a.mouseover-thumbnail-holder .large-thumbnail-style {
	position: absolute;
	margin-top: -385px;
	left: -9999px;
	top: 50%
	z-index: 50;
	opacity: 0;
	filter: alpha(opacity=40);
        -webkit-transition: opacity .5s linear;
	transition: opacity .5s ease-in-out;
	-webkit-box-shadow: 0px 0px 4px 2px #D50E0E;
	-moz-box-shadow: 0px 0px 4px 2px #D50E0E;
	box-shadow: 0px 0px 4px 2px #D50E0E;
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-ms-transition: all 1s linear;
	-kthtml-transition: all 1s linear;
	transition: all 1s linear;
}

a.mouseover-thumbnail-holder:hover .large-thumbnail-style {
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 100;
	opacity: 1;
}

 

[vacunita]

iDevices and for that matter most touch based devices have no hover state since you are using your finger. If your finger is hovering i.e. does not touch the screen, there is no action.

When your finger touches the screen the click event is triggered.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[PCHomepage]

Yes, of course I know that (no mouse: no mouse-over!) but what I meant was that in touching the images they are not working. In some cases the image appears momentarily but moves down off the screen and sometimes it is behind other images as it moves by.

 

[vacunita]

Do you have a link where we can see this?

Since there is no hover, the click or tap may not be holding so the image goes away quickly.

Its hard to say without seeing hat its doing.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[PCHomepage]

You can try this direct link to one of the photo albums: Packards / Imperials Page.

Note, however, that per another tek-tips posting the vertical scrolling is not working so on an iPad you'll see only the first row of photos in the album but on an iPhone, iPad or other small device, you might not see any. I've not yet found a solution to the known bug.