CSS Library: Image CSS: Here
CSS Image Gallery
Author: Dynamic Drive
This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS's ":hover" pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it's possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn't support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.
Demo:
Simply beautiful.
So real, it's unreal. Or is it?
Sushi for dinner anyone?
Run wild with horses.
Dynamic Drive
Dynamic Drive
Zoka Coffee
Zoka Coffee
Note: Here the enlarged images are set to "overlay" any content that it may come in contact with. You can easily disable overlaying just by giving the gallery container (.gallerycontainer) a height set to that of the largest image's.
The CSS:
Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.
Comment Pages 10 of 34 pages « First < 8 9 10 11 12 > Last »
IF there is any advice out there to fix this bug, I'd greatly appreciate it.
It's working out well for a site I'm constructing for a library's historical collection (everyone that viewed it was so impressed, and loved this feature of the site).
I did find a workaround (that works for me anyway) re: the gap problem when a footer is on the same page. In the thumbnail span area I changed the position to fixed, and it worked in FF, Safari, & Netscape (mac-based, don't know about windows yet).
This also shifts my enlarged image more toward the center of the browser window, which still works out OK for me. Hope this helps.
I am very much thank full for this simple and gr8 CSS Image Gallery.
I went through your gallery http://homepage.mac.com/stevenbutterworth/Sites/cars/Iconic/index.html.
I want to use gallery.css file of your bove site.
I want to use this on my Personal web gallery. not for commercial/bussness use.
I am putting the bellow tag along with your css script.
-----------------------------------------------
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
-----------------------------------------------
Please let me know if i need to add anything else other than above tag.
Thanks & Regards,
Ravi
* {
margin:0px;
padding:0px;
border:0px;
}
to start my css files, but it seems that if you use the border:0px; statement this will NOT work in IE6.
I don't know why that happens ... hope this will help someone.
html {
overflow-x: hidden;
overflow-y: hidden;
}
modify the "hidden" if you need one of the scroll bars
Can I make the "span Img" align so that the enlarged img is V-alinged in the middle or bottom off the thumb?
I'm planning on using about multiple pic/page and they are placed between "DIV"-tags
Comment Pages 10 of 34 pages « First < 8 9 10 11 12 > Last »
Thx for this script.
I am trying to add a small feature to this script using php.
Filename must be picked dynamicaly from gallery/image diretory?
I am using this script in my site.
Thx a lot to author,
Regards,
Ravi