Swift

Efeito Opacity – Transparência na Imagem

A propriedade Opacity, permite que você aplique um efeito de transparência em uma imagem quando passamos o mouse em cima dela.
Você pode aplicar este efeito de diferentes maneiras:
1) Aplicar em todas e quaisquer imagens publicadas nas postagens – para este efeito é necessário aplicar o estilo da propriedade opacity no CSS do seu template, para que o efeito seja reconhecido e se aplique automaticamente.
2) Aplicar apenas em determinadas imagens – cada vez que quiser adicionar transparência em alguma imagem é necessário que você aplique as propriedades a cada imagem, separadamente.
Imagem 1:
Imagem 2:

1. Aplicando transparência à todas as imagens nos posts:

Este efeito é igual ao aplicado no Template Goth Red Black, onde o efeito se aplica à todas as imagens publicadas nas postagem. Note que a aplicação deste efeito é feita de forma automática. A imagem se apresenta opaca, e quando passamos o mouse em cima ela fica mais forte(imagem 1).
No menu “modelo”, vá em “Editar HTML” , não precisa clicar em “Expandir modelos de widgets”, e procure por:
.post img {
padding:4px;
border:1px solid $bordercolor;
}
E SUBSTITUA tudo por:
.post img {
filter: alpha(opacity:0.5); 
KHTMLOpacity: 0.5; 
MozOpacity: 0.5; 
-khtml-opacity:.50; 
-ms-filter:"alpha(opacity=50)"; 
-moz-opacity:.50; 
filter:alpha(opacity=50); 
opacity:.50;
}
.post img:hover {
filter: alpha(opacity:1); 
KHTMLOpacity: 1; 
MozOpacity: 1; 
-khtml-opacity:.1; 
-ms-filter:"alpha(opacity=100)"; 
-moz-opacity:1; 
filter:alpha(opacity=100); 
opacity:1;
}
Caso queira aplicar o efeito da imagem 2:
SUBSTITUA por:

.post img {
filter: alpha(opacity:1); 
KHTMLOpacity: 1; 
MozOpacity: 1; 
-khtml-opacity:.1; 
-ms-filter:"alpha(opacity=100)"; 
-moz-opacity:1; 
filter:alpha(opacity=100); 
opacity:1;
}
.post img:hover {
filter: alpha(opacity:0.5); 
KHTMLOpacity: 0.5; 
MozOpacity: 0.5; 
-khtml-opacity:.50; 
-ms-filter:"alpha(opacity=50)"; 
-moz-opacity:.50; 
filter:alpha(opacity=50); 
opacity:.50;
}

2. Aplicando transparência apenas em determinadas imagens:

Cada vez que quiser adicionar transparência em alguma imagem é necessário que você aplique as propriedades a cada imagem, separadamente.

Imagem Linkada – (passe o mouse)

Para aplicar este efeito, utilize este código:

<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="ENDEREÇO-DA-IMAGEM" /></a>

You Might Also Like

0 comentários

Facebook

Visitas