Tip: Shadow and image hovering effects on the Group Module

[Bernard Lama]

Hi NCs,

I'm not sure  whether you like it or not. But I have a small idea to make your main page group module stand out with the shadow and image hovering effects.


Note: OK and Tested with 2 and 3 column layouts, New Design Studio.


Live Preview :
here




Preview:



Copy and paste the following code into Advanced CSS via my network> Settings>Appearance.


This code is for those who are using 2 column layout, New Design Studio


.xg_3col .xg_3col .module_groups .clist li img {
min-width: 96px;
-moz-box-shadow: 3px 3px 4px #999; /* Firefox */
-webkit-box-shadow: 3px 3px 4px #999; /* Safari/Chrome */
box-shadow: 3px 3px 4px #999; /* Opera and other CSS3 supporting browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* IE 8 */
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');/* IE 5.5 - 7 */


border: 1px solid #CCC;
}

.xg_3col .xg_3col .module_groups .clist li img:hover {

opacity: 1;


/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));




/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}





This code is for those who are using 3 column layout, New Design Studio


.xg_widget_main_index_index .xg_3col .xg_2col .module_groups .clist li img {
min-width: 96px;
-moz-box-shadow: 3px 3px 4px #999; /* Firefox */
-webkit-box-shadow: 3px 3px 4px #999; /* Safari/Chrome */
box-shadow: 3px 3px 4px #999; /* Opera and other CSS3 supporting browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* IE 8 */
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');/* IE 5.5 - 7 */


border: 1px solid #CCC;
}

.xg_widget_main_index_index .xg_3col .xg_2col .module_groups .clist li img:hover {

opacity: 1;


/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));




/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}


 


Wanna make your ning site unique? Contact me [e-mail]

[Pastor Donald C. Garner Jr.]

It worked fine for me, Thank You Bernard! I've got some ides, and some sites I've been looking at. I'll inbox you this week about some tweek's/hack's, and design ideas for my site. Can you go take a look, and tell me what I could to to make it MORE attractive and visually stimulating as well as inviting to members, and those visiting? The Splash Page, and the Main page.

[Bernard Lama]

Please send me your site link via pm.

[Bernard Lama]

You are welcome and it can be done in other different pages also. 

[CJ Whips]

Bernard, I checked out the LIVE site and low and behold it was your own Social Network. I must say that it is very aesthetically pleasing . Nice logo, great color balance and very functional layout. Bravo !

I want to have a few people to help me build my Social Network so if one isn't available another person might be.

So, I was wondering if you know others in the Ning Creators Community  that are considered Superstars like yourself that would give me a little list of,  so I'm not bothering you alot and so if you're not available I have others to fall back on

Bye the way, how do you prefer to be addressed, Bernard or Bernie or...?

Thanks, C J 

[Bernard Lama]

Hi CJ,

Thanks a lot CJ for visiting my site. Glad you liked my site. Well, I'm always available for hire and you can mail me at [e-mail] at any time. Otherwise you have more options if join this group.

Bernard is my name and I love my name. Otherwise you can call me BL also.

Best Wisehes

Bernard