How can I make whole DIV is clikable?

Requirement:
I have an image, while hovering on image(img01) need to
Show a div with background color white transparent with dummy text and button(horizontally and vertically center aligned as per right side image) and the whole div should be clickable.

Exisitng structure: don’t change add mark up

<!DOCTYPE HTML>
<html>
<head>
    <style>
  .modernsubcat .fitdetials {
    height: 610px;
    width: 412px;
    float: right;
    padding-right: 25px;
    padding-bottom: 60px;
}
.modernsubcat .morecolors {
    margin: 60px 0 80px 0;
    clear: both;
    text-align: center;
    padding-top: 32px;
}
 .modernsubcat .morecolors a {
    background: #333;
    padding: 18px 66px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}
        
    </style>
</head>
<body>
<div class="modernsubcat">
    <div class="fitdetails">
        <img src="img01.jpg" width="552" height="294"/>
        <div class="morecolors" ><!-- button div -->
			<a href="javascript:void(0);">shopnow</a>
				</div>
    </div>
 </div>
</body>
</html>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.