Cbox hover forma cuadrada

Blogueras !! que tal como estan y como les ha ido? me da mucho gusto que sigan visitandome, aunque no actualizo muy seguido xD graciasssss :D!!  como les dije anteriormente yo estoy algo oxidada en cuanto  a lo referente a tutos u.u pero pues poco a poco ire pensando que hacer y como sacar alguno que otro tuto oki !!

Por ahora les traigo un tuto que ya conocen de una forma pero se las pondre de otra, sera un cambio un poquito diferente, pero  se vera lindo ya veran :)!! he visto los cbox en forma circular con efecto hover muy bonito ^^  asi que con la ayuda del mismo codigo que modifique levemente ...se los traigo de forma que no sea circular sino cuadrada :)! no es gran cosa pero bueeeeno xD!!

Para ponerlo en tu blog solo abre un gadegt Html/javascript copias el codigo y lo pegas :)! saludos

• Aqui tu mensaje, Cbox, Status, Facebook, etc etc..!!

<center> <style> .ch-item { width: 100%; height: 85%; border-radius: 10%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; } .ch-info-wrap{ position: absolute; width: 270px; height: 230px; border-radius: 10%; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; top: 20px; left: 20px; background: #222; box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); } .ch-info{ position: absolute; width: 270px; height: 230px; border-radius: 10%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 10%; background-position: center center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .ch-info .ch-info-back { -webkit-transform: rotate3d(0,1,0,180deg); -moz-transform: rotate3d(0,1,0,180deg); -o-transform: rotate3d(0,1,0,180deg); -ms-transform: rotate3d(0,1,0,180deg); transform: rotate3d(0,1,0,180deg); background: #fff; } .ch-img-1 { background-image: url(http://data.whicdn.com/images/49054459/tumblr_mgc73zf1lB1s1svfvo1_500_large.png);background-size:400px; } .ch-item:hover .ch-info-wrap { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8); } .ch-item:hover .ch-info { -webkit-transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d(0,1,0,-180deg); -o-transform: rotate3d(0,1,0,-180deg); -ms-transform: rotate3d(0,1,0,-180deg); transform: rotate3d(0,1,0,-180deg); } .ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 320px; height: 320px; display: inline-block; margin: 20px; } </style> <br /> <ul class="ch-grid"> <li><div class="ch-item ch-img-1"> <div class="ch-info-wrap"> <div class="ch-info"> <div class="ch-info-front ch-img-1"> </div> <div class="ch-info-back"> Aqui tu mensaje, cbox, status, facebook, etc etc..!! </div> </div> </div> </div> </li> </ul> </center>

Creditos (x)