Como colocar zoom nas imagens do blog

Views:
CÓDIGO CSS:

.hoverzoom {
position: relative;
width: 500px; /*--LARGURA DA IMAGEM--*/
margin-left: 7em; /*--DISTÂNCIA EM RELAÇÃO À MARGEM ESQUERDA, ALTERE SE PRECISAR--*/
overflow: hidden;}
.hoverzoom > img {
width: 100%;
border-radius: 2px; /*--ARREDONDAMENTO DA IMAGEM--*/
-webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
-moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
-ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
-o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);}
.hoverzoom:hover > img {
-webkit-transform: scale(1.5); -moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5); transform: scale(1.5);}
.hoverzoom .retina{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
color: #fff !important; /*--COR DO TEXTO--*/
border-radius: 2px; /*--ARREDONDAMENTO DA DO FUNDO DA IMAGEM--*/
text-align: center; /*--POSICIONAMENTO DO TEXTO--*/
padding: 30px;
-webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
-moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
-ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
-o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); }
.hoverzoom:hover .retina {
opacity: 1;
box-shadow: inset 0 0 100px 50px rgba(0,0,0,.5);}
.hoverzoom .retina p {
color: #fff;}
.hoverzoom .retina a {
display: block;
width: 150px;
background: #6fc5e9; /*--COR DE FUNDO DO BOTÃO--*/
border: 1px solid #59afd4;  /*--COR E TIPO DE BORDA DO BOTÃO--*/
border-radius: 4px;
color: #fff; /*--COR DA FONTE DO BOTÃO--*/
text-decoration: none;
text-align: center;
padding: 10px 15px;
margin: 16px auto 0;}



CÓDIGO HTML:

<div class="hoverzoom">
<img src="AQUI O ENDEREÇO HTTP DA IMAGEM" /> <br />
<div class="retina">
AQUI O TEXTO QUE DESEJAR<br />
<a href="AQUI O LINK PARA ONDE DIRECIONA AO CLICAR">AQUI O TEXTO DO BOTÃO</a></div>
</div>

Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage