将形状放在图标后面作为悬停状态

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

目前该形状未正确显示。不知道现在该怎么做，因为我对这一切都很陌生。

Icon with text underneath
Shape I want to place behind icon when I hover

Answer 1

对你有用吗？

.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>

Answer 2

我认为这个 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
        }