Учим с нуля!
Оставить отзыв · Пожаловаться · RSS
  • Страница 1 из 1
  • 1
Форум » uCoz » Помощь по uCoz » Помогите сделать
Помогите сделать
dline Оффлайн
Проверенный
5
Дата: Суббота, 2015-10-24, 15:45 | Сообщение # 1
Помогите сделать кнопку (Изменить) перенести в аватарку пользователя!
Как в Google

Вот скрины:
Прикрепления: 8074076.png (9.7 Kb) · 0044665.png (71.2 Kb)

Выжигаю все свое время на своей не любимой работе, а что поделоть хлеб то надо зачтото брать! )))
Профиль
kefir Оффлайн
Проверенный
6
Дата: Суббота, 2015-10-24, 19:37 | Сообщение # 2
Засовывай аватарку в див там где уже задано закругление, в тот же див суй кнопку и пиши overflow: hidden;
Профиль
CbIPoK Оффлайн
Проверенный
37
Дата: Воскресенье, 2015-10-25, 07:59 | Сообщение # 3
Держи. При наведении эта штука будет появляться.

HTML
Код
<div class="ava_block" align="center">
    <img src="http://vizgam.ru/ava/one/dline_ava.jpg" alt="$USERNAME$">
    <a href="#" class="red_block">Изменить</a>
</div>


CSS
Код
.ava_block {width: 70px; height: 70px; border-radius: 50%; background: #fff; overflow: hidden;}
.ava_block img {width: 70px; height: 70px; border-radius: 50%;}
.red_block {position: relative; background: rgba(0, 0, 0, 0.65); width: 80px; height: 30px; line-height: 20px; color: #fff; display: inline-block; font-size: 12px; bottom: 33px; left: -5px; visibility: hidden;}
.ava_block:hover > .red_block {visibility: visible;}


-------- Демо --------
Профиль
Форум » uCoz » Помощь по uCoz » Помогите сделать
  • Страница 1 из 1
  • 1
Поиск:
Главная