Efeito ampliar imagens com css

Bom, hoje estou falando do efeito de lupas que tem nas lojas ecommerce (virtuais) e hoje vou fazer um tutorial de como instalar,utilizar e tudo mais!
Eis um exemplo abaixo:

Créditos: loja walmart

Funciona como uma vitrine virtual onde amplia e visualiza grande parte da imagem. Bem legal né?

O nome deste efeito chama-se ZoomPup ou ZoomPad e ele é feito com Jquery mas hoje não vamos utilizá-lo e sim vamos usar o nosso querido e favorito CSS.
Antes de tudo você tem que se decidir se quer aplicar em todas imagens do blog, em todas imagens da postagem ou apenas as imagens que você escolher.

Para começar,eu tenho aqui um código que eu editei,créditos a Meninas Online.

Para aplicar o efeito somente em apenas nas imagens que você escolher.

Cole o código abaixo em um campo de Html do seu post e faça certas alterações:

<img src="URL DA IMAGEM AQUI" class="zoom">
<style>
img.zoom {
display:block;
width:200px;
-webkit-transition-duration: .3s;
border: 5px solid #F34C8E; position:relative;} img.zoom:hover {-webkit-transform: scale(2.00); transform:: scale(2.00); -o-transform: scale(2.00); -moz-transform: scale(2.00); -ms-transform: scale(2.00); z-index:5;}
</style>

Altere o tamanho a cor hexadecimal da borda em:

border: 5px solid #F34C8E;

Para aplicar o efeito em todas as imagens presentes em qualquer lugar do blog.

Basta ir em modelo > editar html do seu blogger

e procurar por (ctrl + f):

]]></b:skin>.

E assim que procurar acima dele você cola esse código:

img {

display:block; 

width:200px; 

-webkit-transition-duration: .3s; 

border: 5px solid #F34C8E; position:relative;} img.zoom:hover {-webkit-transform: scale(2.00); transform:: scale(2.00); -o-transform: scale(2.00); -moz-transform: scale(2.00); -ms-transform: scale(2.00); z-index:5;}

Para aplicar o efeito somente nas imagens do post do blog.

Basta ir em modelo > editar html do seu blogger
e procurar por (ctrl + f):
]]></b:skin>.
E assim que procurar acima dele você cola APENAS UM desses códigos:

.post img {
display:block;
width:200px;
-webkit-transition-duration: .3s;
border: 5px solid #F34C8E; position:relative;} img.zoom:hover {-webkit-transform: scale(2.00); transform:: scale(2.00); -o-transform: scale(2.00); -moz-transform: scale(2.00); -ms-transform: scale(2.00); z-index:5;}

 Ou

.post-body img {
display:block;
width:200px;
-webkit-transition-duration: .3s;
border: 5px solid #F34C8E; position:relative;} img.zoom:hover {-webkit-transform: scale(2.00); transform:: scale(2.00); -o-transform: scale(2.00); -moz-transform: scale(2.00); -ms-transform: scale(2.00); z-index:5;}