1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
| html, body { height: 100%; }
body { background-color : #4d4d4d; font-family :Georgia, "Times New Roman", Times, serif; color :#F08136;
font-size :28px; text-align :center; }
.mes_ronds{
background-position:center top;
border:1px solid #ccc;
border-radius:50%;
box-shadow:inset 3px 3px 4px 0 rgba(0,0,0,0.4);
display:inline-block;
height:250px;
margin-bottom:26px;
width:250px;
overflow:hidden;/*important*/
transition:all 1.5s;
}
.mes_ronds:hover{
box-shadow:inset 0 0 250px 250px rgba(0,0,0,0.4);
}
div.centre2blanc {
top:0px;
height :auto;
width :auto;
max-width :900px;
margin :auto;
text-align :center;
}
img { border :2px; }
a.LesA {
font-family :"Times New Roman", Times, serif; font-size :24px !important;
color :#eeeeee;
text-decoration :none;
}
a.LesA:hover { color :#eeaaaa; }
p.Center {
text-align:center;
font-family:"Times New Roman", Times, serif;
color :#eeeeee;
font-size :28px !important;
}
.mes_ronds { position:relative; }
.mes_ronds .LesA span { position:absolute;
top:0; bottom:0; left:0; right:0;
display:block;
line-height:250px; /* centrage vertical du texte */
opacity:0.6;
transition:all 1.5s;
}
.mes_ronds:hover .LesA span {
color:white;
opacity:1;
font-size :32px;
} |
Partager