On text hover background image width 100%

<div class="section_img">
    <span class="section_img_icon" >STYLE</span>
    <img src="slide3.jpg" alt="" srcset="" />
  </div>

.section_img_icon {
  position: absolute;
  cursor: pointer;
}
.section_img img {
  width: 20%;
  height: 100vh;
  object-fit: cover;
}

.section_img span:hover ~ .section_img img {
  width: 100% !important;
}

Hi Friends
In hear i want to width 100% image with hover but it is not working

>Solution :

You need to remove .section_img for the second part of the ~ operator to work. The .section_img already applies to the first part anyway, so it’s not needed for the second, as they need to be in the same parent for ~ to work.

Of course the 100% will only apply when you hover the STYLE text, because :hover applies to the first part of the operator. If this is not what you intended, you need to add details to the question

.section_img_icon {
  position: absolute;
  cursor: pointer;
}
.section_img img {
  width: 20%;
  height: 100vh;
  object-fit: cover;
}

.section_img span:hover ~ img {
  width: 100% !important;
}

<div class="section_img">
    <span class="section_img_icon" >STYLE</span>
    <img src="slide3.jpg" alt="" srcset="" />
  </div>