Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I want to view a bigger thumbnail of a image when I hover it. Like in DevinatART(when you hover over a text title, you can see a thumb)
Yes, I have read the http://www.simplebits.com/bits/photo_zoom.html but I want it to be absolute and not to change the text, just to stay over it.
I know that my english isn't the best, and propably it's hard to understand what I want. :/ -
- CommentAuthormr. fahrenheit
- CommentTimeDec 17th 2005
You're english isn't bad. Can't you set the thumbnail to float, then? -
i don't think it's very easy to do that... when you zoom into the picture, if you set it to absolute position, you will pull it out of the normal flow and cause the text to realign.
Try adding this to Dan Cederholm's example:
.containter { position:relative;}
#zoom a:hover { position:absolute; top:0; right:0;}
to see what I mean. -
Ok, I'm back with a solution. A few tweaks and voila:
----------------------------------------------------------
.container {
width: 500px;
padding: 15px;
margin: 3px 0 20px 0;
border: 1px solid #ccc;
background: #fff;
}
#zoom {
float: right;
width: 127px; /* show only thumbnail */
height: 96px;
overflow:visible;
margin: 0 0 10px 10px;
position:relative;
}
#zoom a {
float:right;
border: 1px solid #000;
text-indent: -1000em; /* hide the link text */
overflow: hidden;
display: block;
width: 125px; /* show only thumbnail */
height: 94px;
background: url(../images/zoom.jpg) no-repeat top left;
}
#zoom a:hover {
width: 300px;
height: 225px;
background-position: 0 -104px;
position:absolute;
right:0;
}
-----------------------------------------------------------------------------------
(only relevant css code shown)
where i slightly modified the purpose of #zoom div:
-----------------------------
<div class="container">
<div id="zoom">
<a href="http://www.simplebits.com/images/zoom.jpg">View photo</a>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dapibus....
</div>
-----------------------------
(notice it now only wraps around the image, leaving the text outside, in the container)
Seems to be working as intended, though I haven't tested it yet on all browsers.
While this is an interested technique, I wouldn't use it in 'real life'. It's not very productive having to write css code for each image you insert in the page. And having to insert both the image and the thumbnail in the same image file also takes a lot of time... Nevertheless, this is a nice technique! -
-
CommentAuthormoondoggie
- CommentTimeDec 19th 2005
One of the commenters on the SimpleBits article went so far as to not only make the image go over the text, he also adds in a caption. He does it in several ways with varying results. -
-
cool... i just discover this thing on other site, hover the link then the image appear with a caption.. didnt expected i found the method here..
-
Late comment because I only just joined.
Is this what you mean?
http://www.cssplay.co.uk/menu/magnify.html -
http://www.cssplay.co.uk/menu/magnify.html - slip up above
1 to 8 of 8