Efeito Enhancing

Eae gente aqui e o Matheus hoje eu vo ensinar a como fazer um efeito realmente muito show de bola acho que vocês iram adorar

Demonstração
Vá em "Modelo> Editar HTML" Logo apos pesquise por

]]></b:skin>

Cole acima de skin o seguinte código

div {
width:30%;
min-width:300px;
font-size:100%;
}

div:after {
content:"";
display:block;
clear:both;
height:50px;
}

h1 {
font:bold 1.2em Arial, Helvetica, sans-serif;
padding:10px;
background:#eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:2px dashed #ccc;
color:#333;
}

h1 a {
display:block;
font:normal 0.5em "Times New Roman", Times, serif;
text-transform:uppercase;
letter-spacing:0.2em;
text-decoration:none;
color:#666;
padding:5px 0 0;
}

h1 a:hover {
text-decoration:underline;
}

h1 + p {
font:0.8em/1.5em Arial, Helvetica, sans-serif;
}

h2 {
font:bold 1.1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#666;
border-bottom:1px dotted #ccc;
border-top:1px dotted #ccc;
float:left;
width:100%;
padding:5px 0;
}

h2 span {
font-size:0.7em;
font-weight:normal;
text-transform:none;
}

ul {
width:100%;
background:#ccc;
list-style:none;
float:left;
padding:0 0 2.5% 0;
margin-top:5px;
}

ul li {
width:30%;
float:left;
margin:2.5% 0 0 2.5%;
position:relative;
}

ul li img {
max-width:100%;
float:left;
border:2px solid #eee;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

/*----------------------------------------
Gallery One
-----------------------------------------*/
.gal-1 li {
-moz-transition:all 0.6s ease;
-webkit-transition:all 0.6s ease;
-ms-transition:all 0.6s ease;
-o-transition:all 0.6s ease;
transition:all 0.6s ease;
opacity:0.5;
}

.gal-1 li:hover {
-moz-transform:scale(1.4);
-webkit-transform:scale(1.4);
-o-transform:scale(1.4);
-ms-transform:scale(1.4);
transform:scale(1.4);
z-index:2;
opacity:1;
-moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

/*----------------------------------------
Gallery Two
-----------------------------------------*/
.gal-2 li {
-moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
-ms-transition:all 1s ease;
transition:all 1s ease;
opacity:0.8;
}

.gal-2 li:hover {
-moz-transform:scale(1.4) rotate(360deg);
-webkit-transform:scale(1.4) rotate(360deg);
-o-transform:scale(1.4) rotate(360deg);
-ms-transform:scale(1.4) rotate(360deg);
transform:scale(1.4) rotate(360deg);
z-index:2;
opacity:1;
-moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

/*----------------------------------------
Gallery Three
-----------------------------------------*/
.gal-3 li {
-moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
-ms-transition:all 1s ease;
transition:all 1s ease;
-moz-transform:rotate(20deg) translate(20px, 5px);
-webkit-transform:rotate(20deg) translate(20px, 5px);
-o-transform:rotate(20deg) translate(20px, 5px);
-ms-transform:rotate(20deg) translate(20px, 5px);
transform:rotate(20deg) translate(20px, 5px);
}

.gal-3 li:nth-of-type(2) {
-moz-transform:rotate(-10deg) translate(0, 10px);
-webkit-transform:rotate(-10deg) translate(0, 10px);
-o-transform:rotate(-10deg) translate(0, 10px);
-ms-transform:rotate(-10deg) translate(0, 10px);
transform:rotate(-10deg) translate(0, 10px);
}

.gal-3 li:nth-of-type(3) {
-moz-transform:rotate(10deg) translate(0, 20px);
-webkit-transform:rotate(10deg) translate(0, 20px);
-o-transform:rotate(10deg) translate(0, 20px);
-ms-transform:rotate(10deg) translate(0, 20px);
transform:rotate(10deg) translate(0, 20px);
}

.gal-3 li:nth-of-type(4) {
-moz-transform:rotate(-30deg) translate(20px, -10px);
-webkit-transform:rotate(-40deg) translate(20px, -10px);
-o-transform:rotate(-40deg) translate(20px, -10px);
-ms-transform:rotate(-40deg) translate(20px, -10px);
transform:rotate(-40deg) translate(20px, -10px);
}

.gal-3 li:nth-of-type(5) {
-moz-transform:rotate(5deg) translate(0, -10px);
-webkit-transform:rotate(5deg) translate(0, -10px);
-o-transform:rotate(5deg) translate(0, -10px);
-ms-transform:rotate(5deg) translate(0, -10px);
transform:rotate(5deg) translate(0, -10px);
}

.gal-3 li:nth-of-type(6) {
-moz-transform:rotate(-5deg) translate(-10px, -10px);
-webkit-transform:rotate(-5deg) translate(-10px, -10px);
-o-transform:rotate(-5deg) translate(-10px, -10px);
-ms-transform:rotate(-5deg) translate(-10px, -10px);
transform:rotate(-5deg) translate(-10px, -10px);
}

.gal-3 li:hover {
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
-ms-transform:scale(2);
transform:scale(2);
z-index:2;
-moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

/*----------------------------------------
Gallery Four
-----------------------------------------*/
.gal-4 li {
-moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
-ms-transition:all 1s ease;
transition:all 1s ease;
}

.gal-4 li:hover {
-moz-transform:scale(2.6) translate(52px, 22px);
-webkit-transform:scale(2.6) translate(52px, 22px);
-o-transform:scale(2.6) translate(52px, 22px);
-ms-transform:scale(2.6) translate(52px, 22px);
transform:scale(2.6) translate(52px, 22px);
z-index:2;
}

.gal-4 li:nth-of-type(2):hover {
-moz-transform:scale(2.6) translate(0, 22px);
-webkit-transform:scale(2.6) translate(0, 22px);
-o-transform:scale(2.6) translate(0, 22px);
-ms-transform:scale(2.6) translate(0, 22px);
transform:scale(2.6) translate(0, 22px);
}

.gal-4 li:nth-of-type(3):hover {
-moz-transform:scale(2.6) translate(-52px, 22px);
-webkit-transform:scale(2.6) translate(-52px, 22px);
-o-transform:scale(2.6) translate(-52px, 22px);
-ms-transform:scale(2.6) translate(-52px, 22px);
transform:scale(2.6) translate(-52px, 22px);
}

.gal-4 li:nth-of-type(4):hover {
-moz-transform:scale(2.6) translate(52px, -22px);
-webkit-transform:scale(2.6) translate(52px, -22px);
-o-transform:scale(2.6) translate(52px, -22px);
-ms-transform:scale(2.6) translate(52px, -22px);
transform:scale(2.6) translate(52px, -22px);
}

.gal-4 li:nth-of-type(5):hover {
-moz-transform:scale(2.6) translate(0, -22px);
-webkit-transform:scale(2.6) translate(0, -22px);
-o-transform:scale(2.6) translate(0, -22px);
-ms-transform:scale(2.6) translate(0, -22px);
transform:scale(2.6) translate(0, -22px);
}

.gal-4 li:nth-of-type(6):hover {
-moz-transform:scale(2.6) translate(-52px, -22px);
-webkit-transform:scale(2.6) translate(-52px, -22px);
-o-transform:scale(2.6) translate(-52px, -22px);
-ms-transform:scale(2.6) translate(-52px, -22px);
transform:scale(2.6) translate(-52px, -22px);
}

/*----------------------------------------
Gallery Five
-----------------------------------------*/
.gal-5 li {
-moz-transition:all 0.6s ease;
-webkit-transition:all 0.6s ease;
-o-transition:all 0.6s ease;
-ms-transition:all 0.6s ease;
transition:all 0.6s ease;
opacity:0.6;
position:relative;
}

.gal-5 li:hover {
opacity:1;
}

.gal-5 li:target {
-moz-transform:scale(2.2);
-webkit-transform:scale(2.2);
-o-transform:scale(2.2);
-ms-transform:scale(2.2);
transform:scale(2.2);
z-index:2;
opacity:1;
}

.gal-5 li:target img {
-moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

.close {
display:none;
font:0.3em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:0.3em;
text-decoration:none;
background:#c15252;
padding:2px 2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#fff;
position:absolute;
top:-3px;
right:0;
-moz-ox-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
}

.close:hover {
background:#d06464;
}

.gal-5 li:target .close {
display:inline;
}

/*----------------------------------------
Gallery Six
-----------------------------------------*/
.gal-6 li {
-moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
-ms-transition:all 1s ease;
transition:all 1s ease;
opacity:0.6;
position:relative;
}

.gal-6 li:hover {
opacity:1;
}

.gal-6 li:target {
-moz-transform:scale(2.2) rotateY(360deg);
-webkit-transform:scale(2.2) rotateY(360deg);
-o-transform:scale(2.2) rotateY(360deg);
-ms-transform:scale(2.2) rotateY(360deg);
transform:scale(2.2) rotateY(360deg);
z-index:2;
opacity:1;
}

.gal-6 li:nth-of-type(even):target {
-moz-transform:scale(2.2) rotateX(360deg);
-webkit-transform:scale(2.2) rotateX(360deg);
-o-transform:scale(2.2) rotateX(360deg);
-ms-transform:scale(2.2) rotateX(360deg);
transform:scale(2.2) rotateX(360deg);
}

.gal-6 li:target img {
-moz-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

.close {
display:none;
font:0.3em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:0.3em;
text-decoration:none;
background:#c15252;
padding:2px 2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#fff;
position:absolute;
top:-3px;
right:0;
-moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
}

.close:hover {
background:#d06464;
}

.gal-6 li:target .close {
display:inline;
}

Salve o modelo , logo apos va em "Layout" Crie um novo Gadget HTML/JAVASCRIPT e cole o código a baixo

<div>
<ul class="gal-1">
         
            <li><img src="http://www.tangledindesign.com/blog/demos/css3-enhanced-galleries/1.jpg" alt=""></li>
         
            <li><img src="http://www.tangledindesign.com/blog/demos/css3-enhanced-galleries/2.jpg" alt=""></li>
         
            <li><img src="http://www.tangledindesign.com/blog/demos/css3-enhanced-galleries/3.jpg" alt=""></li>
         
            <li><img src="http://www.tangledindesign.com/blog/demos/css3-enhanced-galleries/4.jpg" alt=""></li>
         
            <li><img src="http://www.tangledindesign.com/blog/demos/css3-enhanced-galleries/5.jpg" alt=""></li>
         
            <li><img src="http://www.tangledindesign.com/blog/demos/css3-enhanced-galleries/6.jpg" alt=""></li>
         
        </ul>
</div>

um tutorial bem comprido mais o resultado vale mesmo muito apena, bom galera , e não esqueçam de comentar ! , Ate mais