Tip: Bring Your Boring Photo Module to Life

[Bernard Lama]

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.

[Anthony]

Nice!

[Ferdinand Rey]

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

[Bernard Lama]

Please check it here

[soaringeagle]

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

[Bernard Lama]

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. 

[soaringeagle]

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

[classic]

Nice

[Bernard Lama]

Thank you all.

[Bernard Lama]

Hi Trocar,

It sounds like you are using New Design Studio and  "The character limit of 15000 has been exceeded".    If this is the case then please remove the codes which are not important and try again.

Best Wishes 

Bernard

[Writer Chick {Diane}]

It didn't do a thing for me.  Using Chrome and the old appearance editor. :(

[Bernard Lama]

Hey Diana,

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

[Kos]

Does not work in Firefox in old editor either :(