Madly Luv - O mLuv é um blog pessoal no qual aborda vários assuntos como design, músicas, literatura, arte, televisão etc. Desenvolvido e mantido por Ana Flávia Cador.

Opacidade nas imagens

Tutorial HTML, CSS e Javascript

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">

Veja também...

Vida de Freelancer: Quando o design não é o suficiente
Um dia em Piri: Reserva Vargem Grande
Resenha: Sombras Super Shock, da ColourPop
¬¬ zZz x_x o_O ^^ T_T ;D :x :S :P ::teary:: ::sweat:: ::stress:: ::rolleyes:: ::love:: ::cool:: ::blush:: ::attention:: ::angry:: :) :( ._. *o* *O_O


5 Comentário(s)

(5 pelo blog e pelo facebook)
  • Patrícia Souza
    Visitar blog
    14 . 05 . 2015

    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 ;)

    Responder

  • Carol Bandel
    Visitar blog
    27 . 02 . 2015

    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

    Responder

    • Aninha
      Visitar blog
      28 . 02 . 2015

      @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

      Responder

      • Carol Bandel
        Visitar blog
        28 . 02 . 2015

        @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 :*

        Responder

        • Aninha
          Visitar blog
          01 . 03 . 2015

          @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!