HTML, CSS e Javascript

Opacidade nas imagens

Sabe o efeitozinho claro-escuro que aparece em algumas imagens quando se passa o mouse? É um CSS bem simples, veja só:

Abra seu CSS e coloque este código nele:

/****** opacidade - MADLYLUV.COM ******/
.opacidade
	{filter:alpha(opacity=65); /*opacidade em 65% - para IExplorer*/
	opacity: 0.65; /*opacidade paa outros navegadores*/
	-webkit-transition: All 0.3s ease-in-out; /*efeito de transição*/
	-moz-transition: All 0.3s ease-in-out;
	-o-transition: All 0.3s ease-in-out;}

.opacidade:hover
	{filter:alpha(opacity=100); /*opacidade em 100%*/
	opacity: 1;}

Para colocar na imagem, coloque apenas class="opacidade". Mas, se você usa bordas nas imagens ou qualquer outra classe dentro da imagem, coloque desta maneira:

<img src="http://imagem.jpg" class="borda ; opacidade">

Comentários

Atenção: Não é possível realizar novos comentários nesta página pois ela será descontinuada em breve, assim como todos os outros tutoriais da sessão Extras.
  • Patrícia Souza

    Amei <3, e já estou colocando no meu blog (com todos os créditos, claro, hahahahaha).
    Muito obrigada por compartilhar todos esses extras com a gente, Aninha <3 <3 <3

    Um super beijo ;)

  • Carol Bandel

    Ana, o código HTML onde fica a class eu coloco onde? Uso WP e não acho a página dos posts pra eu configurar essas coisas… Beijo

    • Aninha

      @Carol Bandel, as classes do css você coloca no seu style.css, enquanto a chamada da class você coloca em qualquer div que quiser. Se você não está achando em suas páginas, provavelmente será porque você está no modo "visual" de edição do post/pagina. É só mudar para "texto". Caso não ache os itens que você queira colcoar a opacidade, é necessário abrir os arquivos de seu tema indo em Aparências > Editor

      • Carol Bandel

        @Aninha, Pois então, eu estava tentando colocar direto no editor porque daí eu já configurava tudo de uma vez, mas como não consegui, vou tentar colocar o código pelo modo "visual". Obrigada pela dica. Ah, posso dar uma sugestão (se não for ser atrevida, é claro kk)? Mas tu poderia fazer um tutorial ensinando a colocar esse tooltip de alguns link (ex.: os da rede social na sua sidebar)? Bjoooo, mil obrigadas :*

        • Aninha

          @Carol, lembrando que o css precisa ser obrigatoriamente no style.css, ok? Você só acrescentará class="opacidade" no lugar que você quer que tenha a opacidade de fato, pode ser imagem, uma div ou qualquer item com tag html. :)
          Ah, e obrigada pela dica do Tooltip! *-*
          Beijocas!

ir ao topo