Ajax Loader
×
HTML 
<html>
1
<html>
2
  <body>
3
  
4
    <div class="opis">Przykład przedstawia instrukcję ze strony <a href="http://od-podstaw.blogspot.com">"Od Podstaw"</a>. Jeśli chcesz dowiedzieć się jak zostało to zrobione, wejdź w ten <a href="http://od-podstaw.blogspot.com/2014/10/efekty-css-1-obrazek.html">link</a></div>
5
  
6
    <div class="post-body"><img src="http://funkyimg.com/i/2nKg4.jpg" align="center" width="420px"/></div>
7
  
8
  </body>
9
</html>
 
CSS 
body {
1
body {
2
  background: url(http://funkyimg.com/i/2rKd6.png) !important;
3
}
4
 
5
.opis {
6
  background: #fff;
7
  width: 220px;
8
  position: absolute;
9
  top: 103px;
10
  left: 502px;
11
  border: 3px inset #99CCFF;
12
  padding: 10px;
13
  text-transform: uppercase;
14
  font-size: 10px;
15
}
16
 
17
a:link, a:hover, a:visited {
18
  color: #99CCCC !important;
19
  text-decoration: none !important;
20
}
21
 
22
.post-body {
23
  position: absolute;
24
  top: 52px;
25
  left: 52px;
26
}
27
 
28
 
29
/************
30
to nas interesuje
31
*************/
32
 
33
.post-body img {
34
border-radius: 0px;
35
transition:all 1s;
36
-moz-transition:all 1s;
37
-webkit-transition:all 1s;
38
-o-transition:all 1s;
39
}
40
 
41
.post-body img:hover {
42
border-radius: 40px;
43
transition:all .60s;
44
-moz-transition:all .60s;
45
-webkit-transition:all .60s;
46
-o-transition:all .60s;
47
}
 

Efekty CSS #1 - Obrazek

CSSDeck G+