Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

Many of you know that default Photo Module is so boring. No Standard thumbnail size, no image effects, no hover effect etc. Don't worry, whether you like it or not but I have an idea to make your Photo Module feel much more dynamic and alive. It used to be the case that JavaScript was required to do anything really interesting with a hover effect but these days CSS3 is capable of doing a ton of really cool stuff if you’re creating enough.

Live Demo

Example

Now what to do? Simply copy and paste the following code into Advanced CSS via my network.

 

.module_photo .body_list .clist img {
width: 125px;
height: 102px!important;
-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 */

}

.module_photo .body_list .clist img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}

-------------------------------------------------

Please consider the environment before printing this content.




You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • Nice!

  • Nice! I wander if you can do this on the photo section.

    • NC for Hire

      Please check it here

    • div.bd div.ib a img.xg_lightborder, .module_photo .body_list .clist img {
      width: 125px;
      height: 102px!important;
      -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 */

      }

      div.bd div.ib a img.xg_lightborder:hover, .module_photo .body_list .clist img:hover {
      -webkit-transform: rotate(-7deg);
      -moz-transform: rotate(-7deg);
      -o-transform: rotate(-7deg);
      }

      i added it to main photos page too

      • NC for Hire

        Hi Soaringeagle,

        Are those the right classes for old editor? Because we don't need div.bd div.ib a img.xg_lightborder in order to show these effects.

        Unfortunately I'm no longer using Old editor and I can't test it. 

        • im not either no those are the classes to apply it to the main photo page as well

  • Nice

  • NC for Hire

    Thank you all.

  • This reply was deleted.
    • NC for Hire

      Hey Diana,

      I'm not sure about the old editor. I will check it once and let you know.

    • Does not work in Firefox in old editor either :(

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

scott claxton updated their profile
8 hours ago
Rhonda liked ⚡JFarrow⌁'s discussion Ning Creators Sound Off: Share Your Network
Mar 27
⚡JFarrow⌁ updated their profile photo
Mar 24
Markus Miner and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
Markus Miner replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"Man I'd love the help I was about just start a new network"
Mar 19
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"I can fix that... ill send you my contact info. no problem"
Mar 18
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"I can fix that... ill send you my contact info. no problem"
Mar 18
Markus Miner replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"Changed my design and now my logo overlap my new background header with no option to remove it.…"
Mar 15
Markus Miner replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"Because Ning is a terribly ran business with lack of upgrades and becoming obsolete "
Mar 15
Paul Corona replied to Anastasia_Ning_Support's discussion
Migration FAQ
"It might be transferred, but finding it and setting it up in a usable format is virtually…"
Mar 14
How to Speak to Travelocity Customer Service updated their profile
Feb 26
⚡JFarrow⌁ posted a discussion
Its been a few years since we have collaborated on a Community Share Post.   I would like to know…
Feb 24
More…

Meanwhile, you can check our social media channels