(tip N3 themes2) Thumbnail img 3-D animation, photos page and module + Groups Updated 4-1-14

[George H. Compton IV]

 New version 3.2.1

Enjoy the animation code :-)  

click here to see it live   

The code goes in your design studio CSS section

/* GEOCOM's photos page and module + Groups thumbnail img 3-D animation */
A.matrix-item.matrix-sheet {
   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;
   transition:all 1s ease-in-out!important;} 
LI.matrix-itemFluid.groupHub-group,
A.matrix-item.matrix-sheet DIV.matrix-media-4-3 {
   z-index:1!important;
   position: inherit!important;}
 A.matrix-item.matrix-sheet: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:2!important;}
/* End 3-D animation Ning3 */

[Mary Jane Peterson]

Hi George 

This is great  I love , I have copy and paste in both site  

Thank you 

[George H. Compton IV]

You're welcome Mary :-)

[Noémi Ketterer]

woooooooooow, thx

[George H. Compton IV]

welcome Noémi :)

[George H. Compton IV]

Hello Solael, of course I'm able to assist you.
I believe this is what you wanted.
You have a great day :)





/* GEOCOM's members avatar 3-D img animation Ning 3.0 */
DIV.profileCoverArea-avatarFrame,
DIV.row.membersSection-avatars SPAN.avatar.avatar-96,
DIV.matrix-itemFrame {
    border: 2px 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;
    transition:all 1s ease-in-out!important;}
DIV.profileCoverArea-avatarFrame,
DIV.row.membersSection-avatars SPAN.avatar.avatar-96,
DIV.matrix-itemFrame{
    z-index:1!important;
    position: inherit!important;}
DIV.profileCoverArea-avatarFrame:hover,
DIV.row.membersSection-avatars SPAN.avatar.avatar-96:hover,   
DIV.matrix-itemFrame:hover {
    border: 5px solid rgba(000, 000, 000, 0.73)!important;
    border-radius:3px 11px 1px 11px!important;
    box-shadow: 0px 130px 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; }

[George H. Compton IV]

Hello Solael, of course I'm able to assist you.
I believe this is what you wanted.
You have a great day :)





/* GEOCOM's members avatar 3-D img animation Ning 3.0 */
DIV.profileCoverArea-avatarFrame,
DIV.row.membersSection-avatars SPAN.avatar.avatar-96,
DIV.matrix-itemFrame {
    border: 2px 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;
    transition:all 1s ease-in-out!important;}
DIV.profileCoverArea-avatarFrame,
DIV.row.membersSection-avatars SPAN.avatar.avatar-96,
DIV.matrix-itemFrame{
    z-index:1!important;
    position: inherit!important;}
DIV.profileCoverArea-avatarFrame:hover,
DIV.row.membersSection-avatars SPAN.avatar.avatar-96:hover,   
DIV.matrix-itemFrame:hover {
    border: 5px solid rgba(000, 000, 000, 0.73)!important;
    border-radius:3px 11px 1px 11px!important;
    box-shadow: 0px 130px 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; }

[Noémi Ketterer]

Hello George, I'm very happy, I have to point it :D Thank you

[George H. Compton IV]

Ahh Thank you Noémi, you're welcome :D

[George H. Compton IV]

I'm sorry Solael, I misunderstood what you wanted. You want my box shadows and border radius codes from Jim's 2.0 network for your 3.0 network.. This should do the trick :)


/* GEOCOM's member Thumbnail's & module's borders, colors and box shadows*/
DIV.profileCoverArea-avatarFrame,
DIV.row.membersSection-avatars SPAN.avatar.avatar-96,
DIV.matrix-itemFrame,
DIV.grid-frame.sheet {
    border-radius: 5px 25px 5px 25px!important;
    border: 1px solid rgb(170, 170, 170) !important;
    box-shadow: 6px 6px 10px rgb(204, 204, 204)!important; }

[Noémi Ketterer]

Hi George!

I'm sorry for bad English. I am writing machine translation. I would like to ask you a code that is in the center of the header? Ever since I put it, the code to the page to full screen size of the header slid to the right. If you can, please help.
Thank you so much.

http://noening1.ning.com/

[George H. Compton IV]

Hello again Noémi, this will fix the problem add this code underneath my stylesheet that widens your network in your "Custom Code - End of Page Code box".

<style>
.site-header {
    background-position: center!important;}
</style>