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

Question

[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;
}

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

Comments

[Destell]

Залейте свой пример на codepen. Не особо понятно из разметки, как это вообще должно выглядеть и что именно не срабатывает.

Answer 1

[Сергей delphinpro]

Картинку нафиг, див нафиг.

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

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

a:hover {
  background-color: red; // меняем только цвет и никакой магии!
}