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>