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