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]

[classic]

WOOOOOOOOOOOOOOOOW

This amazing
Thank you my friend
Can you do this photo?

[Bernard Lama]

Yes it can be done with your photo album too...but you need to change the class...BTW, thanks.

[classic]

ok I do

[classic]

?

[Bernard Lama]

.module_photo .body_list .clist img

.module_photo .body_list .clist img:hover

[classic]

^ ^ I want the entire code and not part of it

[Bernard Lama]

http://creators.ning.com/forum/topics/tip-bring-your-boring-photo-m...

[Ron]

very nice Bernard

[Bernard Lama]

Thanks Ron for liking it.

[M.Tariq Malik]

greattttttttttttttttttttttttttttttt

working at http://vustudents.ning.com/

ya can you provide us the code for photo as you have on your on site..

again thanks a lot :-) 

[Bernard Lama]

For photo please replace these 2 classes.. 

.module_photo .body_list .clist img

.module_photo .body_list .clist img:hover

[Pastor Donald C. Garner Jr.]

Bernard thanks this is a great detail My Site Needs! However, can it be added to a NEW page, and still line up like this? With Added video's or Music Embed's on a new page through the html editor, and keep the same formatting?