Страница 1 из 11
Форум » uCoz » Помощь по uCoz » Помогите сделать
Помогите сделать
dline Offline
Проверенный
5
Дата: Суббота, 24.10.2015, 15:45 | Сообщение # 1
Помогите сделать кнопку (Изменить) перенести в аватарку пользователя!
Как в Google

Вот скрины:



Прикрепления: 8074076.png(10Kb) · 0044665.png(71Kb)


Выжигаю все свое время на своей не любимой работе, а что поделоть хлеб то надо зачтото брать! )))
Профиль
kefir Offline
Проверенный
6
Дата: Суббота, 24.10.2015, 19:37 | Сообщение # 2
Засовывай аватарку в див там где уже задано закругление, в тот же див суй кнопку и пиши overflow: hidden;

Профиль
CbIPoK Offline
Проверенный
37
Дата: Воскресенье, 25.10.2015, 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;}


-------- Демо --------


Помог? Ставь + в репутацию! :3
Профиль
Форум » uCoz » Помощь по uCoz » Помогите сделать
Страница 1 из 11
Поиск: