3.02.14, 21:40
0 комментарий
  Уроки

Красивое оформление аватарок

Не плохое оформление аватарок. При наведении на изображение появляться информация о пользователе или другой текст.

HTML:

<div class="userimgblock">
          <div class="userimg"></div>
          <div class="userimgcontent" style="font-size:100px;">
             ;)
          </div>
          <span class="usernick">
          Techno-Co.RU
         </span>
  </div>



CSS:

.userimg {
background: url(admin.jpg) center center no-repeat;
width: 200px;
height: 200px;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s; }

.userimgcontent:hover, .userimg:hover +.userimgcontent { opacity: 0.7; }

.userimgcontent {
color: #fff;
padding: 5px;
opacity: 0;
width: 190px;
height: 157px;
border-bottom: 1px solid rgb(100, 100, 100);
margin-top: -200px;
background: #000;
font-size: 15px;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-webkit-transition: all 200ms linear;}

.usernick {
background: #000;
color: #fff;
opacity: 0.7;
font-size: 19px;
text-align: center;
vertical-align: middle;
display: table-cell;
width: 200px;
height: 32px; }

Напишите своё мнение