Hello friends today i will tell you how to create a button on image on hover

Show Button Over Image on hover

Demo-SHOW BUTTON OVER IMAGE ON HOVER

code-
<!DOCTYPE html>
<html>
<title>Button over image on Hover </title>
<meta name="viewport" content="width=device-width,

initial-scale=1">
<link rel="stylesheet"

href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
<h1>Show Button Over Image on hover</h1>
<div class="w3-display-container w3-hover-opacity"

style="width:50%">
<img

src="https://www.w3schools.com/w3css/img_avatar3.

png" alt="Avatar" style="width:100%">
<div class="w3-display-middle w3-display-hover w3

-xlarge">
<a

href="https://www.gajabwap.blogspot.com"><button

class="w3-button w3-black">gajabwap</button></a>
</div>
</div>
</div>