html – Placing shape behind icon as hover state-ThrowExceptions

Exception or error:

I’m trying to place a shape behind an icon so when you hover the shape will show behind the icon. This is my html code:

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

and this is the CSS:

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

Currently the shape is not showing up properly. Not sure what to do now as I’m pretty new to all of this.

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

How to solve:

Is it useful for you or not?

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

###

I think this CSS must help you what do you want

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

Leave a Reply

Your email address will not be published. Required fields are marked *