Размещение фигуры за значком в состоянии наведения

Question

Я пытаюсь разместить фигуру за значком, чтобы при наведении курсора фигура отображалась за значком. Это мой html код:

<div class="icon">
  <a class="hover1" href="#">
     <img src="images/marketing.png" alt="Marketing icon">
  </a>
  <h3>Marketing</h3>
</div>

, а это CSS:

.icon .hover1:hover {
  background-image: url(images/marketing_2.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

В настоящее время фигура не отображается должным образом. Не знаю, что делать сейчас, так как я довольно новичок во всем этом.

Значок с текстом под
Форма, которую я хочу разместить за значком при наведении курсора

Answer 1

Я думаю, это CSS должно помочь вам, что вы хотите

.icon .hover1{
            position: absolute;
            top: 10%;
            left: 10%;
            z-index: 1
        }
        .icon .hover1:hover{
            position: absolute;
            top: 10%;
            left: 10%;
            background-image: url(https://i.stack.imgur.com/JB1Xw.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            z-index: 0
        }

Answer 2

Это полезно для вас или нет?

.hover1:hover .img2{
   display: block;
    
}

.img2{
  display:none;
  z-index: -1;
  position: absolute;
  top: -2px;
  right: 36%;
  width: 180px;
  height: auto;
  transition: all 0.5s ease-in;
}

.hover1{
    width:fit-content;
    height:fit-content;

}

.img1{
  width:50px;
  height:auto;
    margin-top:30px;
}

div{
  text-align:center;
}

h3{
  margin-top:0px;
}

<div class="icon">

   <a class="hover1" href="#">
         <img class="img2" src="https://i.stack.imgur.com/4Y6nb.png" alt="Marketing icon">
      <img class="img1" src="https://iservat.ir/wp-content/uploads/2017/01/Marketing-PNG-File-284x300.png" alt="Marketing icon">
   </a>
   <h3>Marketing</h3>
</div>