/    Sign up×
Community /Pin to ProfileBookmark

Centered image z-index on top, all overflow images under transparent BG

Copy linkTweet thisAlerts:
Apr 20.2011

Yea, that title isn’t the best so here is what I want to do ([URL=”http://www.justinhackworth.com/#imagegalleries/Weddings/Weddings/8″]AS SEEN HERE USING FLASH[/URL])

I already know how to make a horizontal slider with easing.. there are tons of them all over the web and I have done a few myself. What I don’t know how to do is to essentially change the z-index of just the center picture.

I would assume that the order of the stack would be this

-1 All photos in a row
0 div that as the transparent white background
1 the active image / image that is in the center.

I am still a novice when it comes to javascript.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@misfitplanetApr 21.2011 — Yea, that title isn't the best so here is what I want to do (AS SEEN HERE USING FLASH)

I already know how to make a horizontal slider with easing.. there are tons of them all over the web and I have done a few myself. What I don't know how to do is to essentially change the z-index of just the center picture.

I would assume that the order of the stack would be this

-1 All photos in a row

0 div that as the transparent white background

1 the active image / image that is in the center.

I am still a novice when it comes to javascript.[/QUOTE]

Do you know about JQuery? check ou this resizing used in a dock example:

It may contain the code you want:

http://www.wizzud.com/jqDock/

You do need to prepare a few sizes a head of time to get smooth resizing, but not too many. You can do that easily through gimp. If you have to do it dynamically, I'm not sure how this would work. Maybe a gimp script on your server?
Copy linkTweet thisAlerts:
@lindsayanngauthorApr 21.2011 — @misfitplanet - thanks again for the quick response. I am familiar with jquery and I have been looking through to find something that might be useful.

I am familiar (somewhat - never actually used) the dock plugin but I think that is way overkill and things like the sliders are closer to what I want to do.. I just basically need to figure out a way to make a "window" in the transparent background.

So essentially this:

http://cssglobe.com/lab/easyslider1.7/01.html

or this:

http://sixrevisions.com/demo/slideshow/final.html

What I am thinking is that instead of overflow:hidden I can make it visible but put it behind a transparent BG that has a z-index of +1 and the row of images is -1. Then either create a window/opening in the center OR any image that is in the center is giving a z-index of +2 to place it over the background
×

Success!

Help @lindsayanng 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 5.28,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...