Photo Highlight on Mouse Over?

[Randy L. Vollett]

One of our village collectors site that our members visit a lot has a cool highlight when you mouse over the photos. The cool thing about this is that the shadow expands and not the photo. I like the whole idea of this and was wondering if anyone has done a code like this. Take a look at this at http://www.lemaxcollection.com/villages/spooky-town.

[George H. Compton IV]

Hello Randy :-)
That's just a CSS box shadow set on hover.
Here's the code for your images on a Ning 3.0 network. :)

DIV.matrix-itemFrame:hover {
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5);
    transition:all 0.4s ease-out!important;}

[Randy L. Vollett]

Thanks George. I was expecting a big code. Simple is good. :)

[George H. Compton IV]

Yes it doesn't take much to have an effect like that. Here's the code that I wrote for crossroads

Here's a link to the photo page to see what my codes do :-)
http://4himalone2.ning.com/photos


/* GEOCOM's photos page and module img animation */
DIV.photoListPage DIV.matrix-itemFrame {
   border: 5px solid rgba(249, 74, 246, 0.43)!important;
   border-radius:11px 3px 11px 3px!important;
   box-shadow: 0px 6px 6px 3px rgba(222,  34,  186,  0.2)!important; } 
DIV.photoListPage DIV.matrix-itemFrame:hover {
   border: 5px solid rgba(000, 000, 000, 0.73)!important;
   border-radius:3px 11px 1px 11px!important;
   box-shadow: 0px 200px 15px 8px rgba(000, 000, 000, 0.43)!important;
   transform: matrix(1.5, 0.5, 0.2, 0.9, 0.0, 20.2)!important;
   -webkit-transform: matrix(1.5, 0.5, 0.2, 0.9, 0.0, 20.2)!important;
   transition:all 1.0s ease-out!important;
   z-index:9999!important; }

[Randy L. Vollett]

Now that is cool. Thanks for sharing the codes.

[George H. Compton IV]

Thank you Randy, and your welcome you know I love to share :-)

I forgot to add the photo page lead-in to the earlier code so use this one instead otherwise it will affect a few other things.

DIV.photoListPage DIV.matrix-itemFrame:hover {
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5);
    transition:all 0.4s ease-out!important;}

[Randy L. Vollett]

Thanks.

[Kos]

Wowwww that's some wild sh** right there.  Trippy!  LOL

[George H. Compton IV]

LOL thank you Kos.. I think?? lol  :)

[dave]

Yep i would agree :) this would have to be one of the coolest animations i've seen :)

[Randy L. Vollett]

Cool! Works great. Thanks. :)