@denism300

Как поместить изображение при наведении на передний план?

есть такой блок:
<div class="button-actions">
<img  src="image.png" alt="" />
<a href="#">Текст</a>
</div>

Картинка с прозрачным фоном, используется как рамка кнопки.
При наведении нужно залить фоном тег "< a >", но так, чтобы картинка-рамка была сверху фона. По умолчанию фон белый.
само добавление фона и смену текста реализую так:

.button-actions img {
	position: relative;
}

.button-actions a {
	position: absolute;
	top: 40%;
	text-align: center;
	width: 100%;
}

.button-actions a::after {
	position: absolute;
	content: "Смотреть";
	color: #fff;
	background: #b1bf5e;
	opacity: 0;
	left: 28%;
	top: -98%;
	padding: 6.5rem 3rem;
	border-radius: 20rem;
}

.button-actions a:hover::after {
	opacity: 0.9;
}


рамка типа такой, как ниже, текст внутри рамки расположен
57d9ab3bb9f301572a44e172.png
  • Вопрос задан
  • 950 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Картинку нафиг, див нафиг.

Берем просто ссылку и пишем ей нужные правила

a {
  display: inline-block;
  width:50px; height: 50px; // нужные размеры, по картинке
  background: white url(image.png) no-repeat 50% 50%;
}

a:hover {
  background-color: red; // меняем только цвет и никакой магии!
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы