View difference between Paste ID: QaJL6W4M and 2Sz8LwtM
SHOW: | | - or go back to the newest paste.
1
>>>>>>> 1º Passo:
2
3
Colem esse código entre <style type="text/css"> e </style>
4
5-
#opd{
5+
#cont{
6
    
7
    margin-top:0px; /* quanto ela vai pra baixo */
8
    margin-left:0px; /* quanto ela vai pra direita */
9
    border-radius:100px; /* imagen circular igual a 100, imagem quadrada só é deixar em 0 */
10
    height:auto; /* altura da foto */
11
    width:200px; /* largura da foto */
12-
    opacity:0.5; /* 0.5 você aumenta se quiser mas opaco ou diminui... */
12+
    -webkit-filter: contrast(2.0); /* o tanto do contraste, tem que ser maior que 1 */
13
    -webkit-transition: opacity 0.8s linear;
14-
  -webkit-transition: all 0.5s ease;
14+
    -webkit-transition: all 0.5s ease;
15
    -moz-transition: all 0.5s ease;
16-
       -o-transition: all 0.5s ease;
16+
    -o-transition: all 0.5s ease;
17-
      -ms-transition: all 0.5s ease;
17+
    -ms-transition: all 0.5s ease;
18-
          transition: all 0.5s ease;
18+
    transition: all 0.5s ease;
19
}
20
 
21-
#opd:hover {
21+
#cont:hover {
22
     
23-
    opacity:1; /* pra ela voltar ao modo normal */
23+
     -webkit-filter: contrast(1); /* deixe em 1 pra voltar ao normal */
24
     -webkit-transition: opacity 0.8s linear;
25-
       -webkit-transition: all 0.5s ease;
25+
     -webkit-transition: all 0.5s ease;
26
     -moz-transition: all 0.5s ease;
27-
       -o-transition: all 0.5s ease;
27+
     -o-transition: all 0.5s ease;
28-
      -ms-transition: all 0.5s ease;
28+
     -ms-transition: all 0.5s ease;
29-
          transition: all 0.5s ease;
29+
      transition: all 0.5s ease;
30
}
31
32
>>>>>>> 2º Passo:
33
34
Colem esse código depois de </style> e antes de </body>
35
36-
<img id="opd" src="URL da IMAGEM que vc quer">
36+
<img id="cont" src="URL da IMAGEM que vc quer">
37
38
TUTORIAL FEITO POR AMPLAMENTE.