Dynamic Pop-up Image
Dynamic Pop-up Image
(OP)
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:
. . . and the CSS is:
Perhaps I've made it overly-complicated and something is cancelling out what's needed!
CODE --> HTML
<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:
CODE --> CSS
.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!
Talk To Other Members
RE: Dynamic Pop-up Image
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
RE: Dynamic Pop-up Image
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?:
CODE --> CSS
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; }RE: Dynamic Pop-up Image
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
RE: Dynamic Pop-up Image
RE: Dynamic Pop-up Image
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
RE: Dynamic Pop-up Image
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.