user4584963 user4584963 - 4 months ago 28
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="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>





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

how about using just css:

.mask-layer{
  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.

http://jsfiddle.net/fcfj0y3a/3/

for your click part, use:

$('.mask-layer').on('click', function(e) {
  alert(e.target, 'was clicked');
});