doutorblogs-Efeitos de imagem Hover na blogosfera!

galerinha achei essa dica muito intereçante para brincar com as maguens no nosso blogs e é um efeito sensacional confira a abaixo .

Efeitos de imagem Hover na blogosfera!

Você pode ter visto um capotamento imagem efeito em muitos profissionais e blogs comerciais. Ao rolar , quero dizer que quando você paro seu cursor do mouse sobre a imagem, a imagem de fronteira de cor e estilo / muda a aparência. Bem, usando algumas CSS simples que você pode adicionar alguns efeitos surpreendentes para o seu Blog Images. Sem perder tempo vamos pular direto para os passos a serem seguidos.

Este tutorial usa um padrão simples para adicionar os códigos ou seja, primeiro você precisa adicionar um código CSS acima ]]> e então você precisa adicionar um código HTML como pequenos class = "xyz" para o código da imagem dentro de suas postagens. É isso aí! :>

Em primeiro lugar vê-los em ação!

Live demo: - 10 Efeitos Hover Amazing imagem!

Como adicionar o Top 10 Amazing Image Effects Hover Mouse Para Blogger?

Para tal, siga estes passos,

1. Ir para o Blogger > Layout> Editar HTML
2. Pesquisar ]]>
3. E agora cole qualquer um dos seus preferidos CSS: código acima ]]>

Now whenever you write a post, simply upload an image in your blogger Editor and then switch to the Edit HTML mode and search for this code and paste the HTML: code of your preferred Image effect just after as shown below,

Número # 1

CSS:

. Simple1 (
padding: 5px;
fronteira : 1px solid # ccc;
)
. simple1: hover (
padding: 5px;
background-color: # ccc;
)

HTML:

class = "simple1"

Número # 2

CSS:

. Simple2 (
padding: 5px;
background-color: # ccc;
fronteira : 1px solid # DDD;
)
. simple2: hover (
padding: 5px;
background-color: # eee;
fronteira : 1px solid # 666;
)

HTML:

class = "simple2"

Número # 3

CSS:

. Negros e brancos (
padding: 5px;
fronteira : 1px solid # ccc;
)
. negros e brancos: hover (
padding: 5px;
background-color: # fff;
fronteira : 10px solid # 000;
)

HTML:

class = "preto-branco"

Número # 4

CSS:

. Tracejada (
padding: 5px;
fronteira : 1px solid # ccc;
)
. tracejada: hover (
padding: 5px;
background-color: # fff;
fronteira : 2px tracejada # 000;
)

HTML:

class = "dashed"

Número # 5

CSS:

. Top-bottom (
padding-top: 5px;
padding-bottom: 5px;
beira -top: 3px solid # DDD;
beira -bottom: 3px solid # DDD;
)
. top-bottom: hover (
background-color: # fff;
fronteira -top: 3px solid # 000;
fronteira -bottom: 3px solid # 000;
)

HTML:

class = "top-bottom"

Número # 6

CSS:

.cortina (
padding-top: 10px;
padding-bottom: 10px;
beira -top: 2px solid # DDD;
background-color: # 000;
beira -bottom: 2px solid # DDD;
)
.cortina :hover (
background-color: # fff;
fronteira -top: 3px solid # 000;
fronteira -bottom: 3px solid # 000;
)

HTML:

class = " cortina "

Número # 7

CSS:

. (Vermelho
padding: 5px;
fronteira : 1px solid # ccc;
)
. vermelha: hover (
padding: 5px;
background-color: # E71305;
fronteira : 10px solid # DDD;
)

HTML:

class = "vermelho"

Número # 8

CSS:

. Fadein (
filter: alpha (opacity = 100);
-moz opacidade: 1,0;
opacidade: 1.0;
fronteira : 0;
)
. Fadein: hover (
filter: alpha (opacity = 50);
-moz opacidade: 0,30;
opacidade : 0,30;
fronteira : 0;
)

HTML:

class = "Fadein"

Número # 9

CSS:

. Fadein2 (
filter: alpha (opacity = 50);
-moz opacidade: 0,30;
opacidade: 0,30;
fronteira : 2px solid # 000;

)
. Fadein2: hover (
filter: alpha (opacity = 100);
-moz opacidade: 1,0;
opacidade: 1.0;
fronteira : 2px solid # 000;
)

HTML:

class = "Fadein2"

Número # 10

CSS:

. Thumbnail (
position: relative;
z-index: 0;
)
. miniatura: hover (
background-color: transparent;
z-index: 50;
)
. span thumbnail (
position: absolute;
background-color: # 7AA1C3;
padding: 0px ;
left:-1000px;
fronteira : 1px cinza sólido;
visibility: hidden;
color: white;
text-decoration: Nenhum;
)
. thumbnail span (img
fronteira width: 0;
padding: 0px;
)
. miniatura: hover span (
visibilidade : visible;
top: 0;
left: 5px;
)

HTML: Para saber como aplicar esse efeito de popping em detalhe ler este post -> Pop-up do efeito da imagem

Add Image URL Here" width="100px" height="100px" border="0px" />Add Image URL Here" />
Image Description here

Você pode gostar de brincar com estes códigos, usando MBT HTML Editor . Eu espero que você irá encontrar neste tutorial bastante útil para reforçar ainda mais a sua experiência de blogging cool:>>

fontes e previlegio mybloggertricks