How to hide buttons behind image text and make them stay in the same place across all devices?

Question

I would like to hide two buttons, which I have achieved using transparent.

I've also managed to hide them behind two hand written words in a picture, post and search . The problem is that when it comes to desktop, different screen sizes, mobile/tablet, different screen sizes/browsers, operating systems etc, the buttons don't match the text, being either too high or too low, depending on device etc.

It works if I set one place for mobile and one for desktop, but as soon as anything changes like screen size, the text and buttons mis-match so that the picture text becomes unclickable. It's the effect I'm trying to achieve which is like the user is clicking on handwriting when in fact it's just a hidden button on the image.

Also tried to cut the buttons out of the image and use background: url but it didn't work and just cropped the image in the wrong place, hiding the word.

The only solution I can think of is if there is some way of telling the browser not to move the image regardless of screen size etc.

.btn.btn:hover {color: transparent! important; background: 
transparent! important; border: none! important;}

btn.btn:active {color: transparent! important; background: 
transparent! important; border: none! important; box- 
shadow:none;}

.btn.btn {color: transparent! important; background: 
 transparent! important; border: none! important;}

Html

<div id="content" class="main-container">
<section class="content-area  pt0 ">
<div id="main" class="" role="main">
<div id="shapely_home_parallax-3" class="widget 
shapely_home_parallax"><section class="cover fullscreen 
image-bg"><div class="parallax-window fullscreen" data- 
parallax="scroll" data-image-src="https://adsler.co.uk
/wp- 
content/uploads/2019/07/IMG_20190706_112754.jpg" 
data-ios-fix="true" data-over-scroll-fix="true" data-android- 
fix="true"><div class="align-transform"><div class="row">
<div class="top-parallax-section"><div class="col-md-8 
col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
<div class="mb32"></div><a class="btn btn-lg btn-white" 
href="https://adsler.co.uk/wp-user-test-dashboard-2. 
2/awpcp-place-ad/">Post</a><a class="btn btn-lg btn- 
filled" href="https://adsler.co.uk/search. 
adsler/">Search</a>                              
</div></div><!--end of row--></div>
</div></div></section><div class="clearfix"></div>
</div>
</div><!-- #main -->
</section><!-- section -->

Just so you can get more of a sense of what is meant, the page is: https://adsler.co.uk

Answer 1

You can try to play with display: none and display: block tag arguments for your divs. This probably will require using JavaScript to change the property your your buttons. Something along the lines of when the first button is clicked it's display style is changed to none, and when the second one is clicked the first one's style is changed to block. onclick = "myFunction();" should do the trick. https://www.w3schools.com/js/js_functions.asp for reference on JS functions

Answer 2

It's the effect I'm trying to achieve which is like the user is clicking on handwriting when in fact it's just a hidden button on the image.

A much more effective way of achieving this effect will be to use an HTML image map . Using an image map will allow you to create arbitrarily shaped regions on an image that can be clicked like links.