/    Sign up×
Community /Pin to ProfileBookmark

photo gallery using only html and css?

Copy linkTweet thisAlerts:
Jul 02.2008

Can someone explain to me how this gallery works:

[url]http://clichephotography.com/site/portfolio.html[/url]

There’s no javascript, no flash, and there seems to be a bunch of unnecessary elements in the html document. I’ve played around with it and discovered that the gallery works just fine with the html stripped way down, like this:

[url]http://igorxa.freeshell.org/temp.html[/url]

What is telling the full size image to appear to the left of the thumbnails? Any help in understanding what’s going on here would be very appreciated.

to post a comment
HTML

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelJul 02.2008 — It's all HTML/CSS.

#gallery {[B]position:relative;[/B] width:750px; height:360px; margin:10px}

#thumbs {width:180px; float:right;}

#thumbs a {display:block; float:left; margin:0 0 5px 5px; width:50px; height:50px; border:1px solid #FFFFFF;}

#thumbs a img {width:50px; height:50px; border:0;}

#thumbs a:hover {border-color:#ddd;}

#thumbs a:hover img {[B]position:absolute;[/B] width:auto; height:auto; [B]right:185px; top:0[/B]; border:1px solid #333;}[/QUOTE]

The id="thumbs" is 'child-element' and float-right in "#gallery", and [B]#thumbs a:hover img[/B] makes the full-size image appear in the 'parent container' (#gallery), 185px from-the-right (leaving room for the 180px-width "#thumbs" and a 5-px gutter...).

The effect is nice. Pretty much, what you see, it what this is.
Copy linkTweet thisAlerts:
@igorxaauthorJul 02.2008 — Wow, thanks! It's simple and elegant. And now it makes sense! Thanks again.
×

Success!

Help @igorxa spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...