[Pro] Rollover Effect With Layered Boxes

Freeway
1

Here’s an example of what I’d like to achieve:

I’d like that glow effect on the three boxes on this site. I have a layered box and I’d like to rollover and show the glow effect.

I think I’m having end of the week brain drain or something. Can’t seem to get it to work Every time I use the group function on two boxes (assuming I have to for the effect) they move out of position and they effect doesn’t work. It stays inside the box rather than outside (outer glow, for instance).

Thanks for any insight…

Bob

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Here you go - box 3. This uses a box shadow, like the original.

http://www.deltadesign.co/fw_examples/protac/another-hover.html

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

As easy as those instructions seem, I didn’t follow them.

I got the first part, but the second part is confusing and I’m not sure what I’m supposed to paste where.

Bob

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I must be missing something here. It takes two seconds to do this without CSS boxes and I have yet to get it to work with them.

I have a rollover and Show/Hide Layer that shows an html below when the box above is clicked. But, I’d like to show the box that is clicked to have a glow or something on it to show that’s the one they are on.

It’s pretty much almost exactly the way the old Gallery page was set up on the photography tutorial from way back, but that didn’t use CSS boxes.

Bob

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

I got the first part, but the second part is confusing and I’m not sure what I’m supposed to paste where.

There are 2 parts because the first relates to the first 2 examples (not aimed at you) and the 2nd relates to the example specifically for you.

To reiterate

Select your html container Item>Extended and create a new name/value pair of class:test

In Page>html Markup in the before section paste the code:

<style type="text/css">
.test:hover{
border-color:#c3ca7d;
-webkit-box-shadow:0 0 10px #76a005;
-moz-box-shadow:0 0 10px #76a005;
box-shadow:0 0 10px #76a005;
}
</style>

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Ah…OK. I’ll see how that works.

I finally got the stacked boxes version to work after much trial and error. Still don’t know how I messed that up!

Thanks!

Bob

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options