Button inside image

Well, this is probably very basic and i’m just making some mistake, i have some images with one button inside each of them inside a <div> that are filtered and when they are filtered imagine by photo colors, the button inside stays on his absolute position, that’s normal, the thing is when i place the button inside the div so it goes with the image i can’t center it, can anyone help?
this is the code i tried:

<div class="container">
<div class="filterDiv sea 099"> <input type="image" id="playbuttonn1" onmouseover="myFunction4()" class="thumbnail" src="mysrc1"  onload="myFunction31()" value="PLAY">
<div>       <img width="60" id="playpause" onmouseout="myFunction31()" onclick="plaiy()" class="filterDiv sea 099" src="mysrcbtn"></div>//this is the button i have problems with
      <div id="waveform"></div>
<div class="containerbottom">
<p class="musicbtn">Green Sea</p>
<p class="autorbtn">Peter Marisland</p>
<button class="pricebtn">99€</button>
<a href="#"><button class="moreinfobtn">More Info</button></a>
<a href="#"><button class="seemorebtn">See more</button></a>
</div>
</div>
  <div class="filterDiv sun 199"> <input type="image" id="playbuttonn2" onmouseover="myFunction4()" class="thumbnail" src="mysrc"  onload="myFunction31()" value="PLAY">
<div>       <img width="60" id="playpause" onmouseout="myFunction31()" onclick="plaiy()" class="filterDiv sea 099" src="mysrcbtn"></div>//this is the button i have problems with
<div class="containerbottom">
<p class="musicbtn">Sunny</p>
<p class="autorbtn">John</p>
<button class="pricebtn2">150€</button>
<a href="#"><button class="moreinfobtn">More Info</button></a>
<a href="#"><button class="seemorebtn">See more</button></a>
</div>
</div>
</div>

• This topic was modified 5 years, 11 months ago by Jan Dembowski.