Can't Align pictures

https://www.gomaproductions.com/iad

mdp : gomaprods2023++

Hi all, and happy new year !

I've got a problem here, I searched for solutions, but I can't seem to make them work...

I would like to align a play button (image) on an image background. 

Here is the code (that should work, but don't for some reason) : 

<div class="thumbnail2">
<a href="#wm-popup=/videos#block-yui_3_17_2_1_1698736940101_41778">
<img class="img" src="https://static1.squarespace.com/static/64da9172292d1a5efdb8d98b/t/6540cc49574078325f53e215/1698745419915/2023-10-31+09_28_05-IAD+-+Google%C2%A0Drive.png" width="1200px">
<img class="play" src="https://static1.squarespace.com/static/64da9172292d1a5efdb8d98b/t/658f0853b55b4a219e6b8ae9/1703872595585/play_button.png" width="200px">
</a>
</div>

.thumbnail2{
  display: inline-block;
  position: relative !important;
}

.img{
  opacity:1;
 transition: filter .3s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}

.img:hover{
  transition: .3s ease;
   -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}



.play{
  opacity:80% !important;
   position: absolute !important;
  top: 50% !important; 
  left: 50% !important;
  transform: translate(-50%,-50%);
  width: 150px;
  height: 150px;
}

.play:hover{
  opacity:100% !important;
}

Please help.

Just 

a[data-wm-popup] {
  position: unset !important;
}

made it work, thanks man !!!!

Like you may have seen, I have a transition to black and white when we hover the picture, but 

when we hover the play button, the picture goes back to normal.

I'm trying to keep it in black and white but with no result.

(I tried "pointer-events: none;" on the play button but it doesn't work).

do you happen to have a solution ?

I started a new topic for that.