My website features a profile page displaying the user's photo. I am attempting to create a functionality where when the user hovers over their photo, a transparent mask with text appears allowing them to update their profile picture via a modal.
However, I have been facing some issues in getting this feature to work properly. A demo of the issue is provided below:
$(document).ready(function() {
$('.profile-image').hover(function() {
$('.mask-layer').css("visibility", "visible");
}, function() {
$('.mask-layer').css("visibility", "hidden");
});
});
.profile-image-container {
margin-right: auto;
margin-left: auto;
position: relative;
}
.profile-image-container .profile-image {
border-radius: 6px;
margin: auto;
}
.profile-image-container .mask-layer {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
.profile-image-container .mask-layer span,
.profile-image-container .mask-layer i {
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="profile-image-container">
<img class="profile-image" src=http://nineplanets.org/images/earth.jpg alt="Profile img 0313">
<div class="mask-layer">
<div class="update-pic">
<span>Update Photo</span>
</div>
</div>
</div>You can view the problematic demo here.
The appearance on my live site is slightly better, as the mask aligns correctly over the image. However, it still has a flashing effect that needs fixing.
An important requirement is for the cursor to always appear as a link. Currently, when hovering over the text, the cursor changes to a text bar which is not desired.