user4584963 user4584963 - 1 year ago 173
jQuery Question

How to make image mask appear on hover

On my site I have a profile page with the user's photo. When the user hover's over their photo, I want a transparent mask with some text to appear over the image that the user can then click that brings up a modal where the user can update their profile picture.

I can't get it to work. Demo is 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=""></script>
<div class="profile-image-container">
<img class="profile-image" src= alt="Profile img 0313">
<div class="mask-layer">
<div class="update-pic">
<span>Update Photo</span>

Here is my jsfiddle.

On my site it looks better, the mask actually sits centered over the image. But it still flashes.

Also this is important, I want the cursor to always appear as a link. Currently when the user hovers over the text, the cursor changes to the text bar and I don't want that.

Answer Source

how about using just css:

  visibility: hidden:
.profile-image:hover mask-layer{
  visibility: visible;
  cursor: pointer;

I've updated your jsfiddle with the above css and it does not flash.

for your click part, use:

$('.mask-layer').on('click', function(e) {
  alert(, 'was clicked');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download