Creating a hover effect for displaying image masks

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.

javascriptjquerycss

Answer №1

Have you considered utilizing only css for this task?

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

After applying the above css in your jsfiddle, the flashing issue should be resolved.

Here is the updated version of your jsfiddle.

As for handling the click event, you can use the following code:

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

Answer №2

If you simply want to display the mask when the user's mouse hovers over the image, there is no need to use JavaScript.

Check out this demonstration where I have added an additional CSS rule:

.profile-image-container:hover .mask-layer {
  display: flex;
}

I have set the default display for the mask-layer to be none.

Here is the demo.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

express-validator: bypass additional validation in a user-defined validator

Utilizing the express-validator package for validating my request data. As per the documentation, we need to declare them in this manner: app.use(expressValidator({ customValidators: { isArray: function(value) { return Array.isArray(value); ...

javascriptnode.jsvalidationexpress

Using Perl script to identify and highlight rows based on specific cell values

I am struggling with how to highlight a row when Column F displays a value of F. I understand that I can achieve this using CSS/JS, but I keep hitting a roadblock. Coding is new to me, so I would greatly appreciate some assistance if possible. Objective: ...

htmlcssperl

What are the steps to resolve a peer dependency problem with npm?

I am facing a conflict in my package.json file with the following modules: react-router requires react 0.13.x redbox-react requires react@>=0.13.2 || ^0.14.0-rc1 After running npm install react, I ended up with version <a href="/cdn-cgi/l/emai ...

javascriptnode.jsnpm

What steps can I take to resolve the "this is undefined" issue in VueJS?

Whenever I include the line this.$store.commit('disconnect');, it throws a "this is undefined" error. Any suggestions on how to resolve this issue? store/index.js : export const state = () => ({ log: false, user: {token: null, id: null, u ...

javascriptvue.jsundefinednuxt.js

Obtain the text that is shown for an input field

My website is currently utilizing Angular Material, which is causing the text format in my type='time' input field to change. I am looking for a way to verify this text, but none of the methods I have tried give me the actual displayed text. I a ...

javascriptcssangularjsseleniumangular-material

Tips on implementing v-show within a loop

Hey @zero298, there are some key differences in the scenario I'm dealing with. My goal is to display all the items in the object array and dynamically add UI elements based on user input. Additionally, v-if and v-show function differently (as mentione ...

javascriptvue.js

The server's delayed response caused the jQuery ajax request to be aborted

Encountering delayed AJAX response from the PHP server upon aborting the AJAX request. Currently utilizing the CodeIgniter framework for the server script. Javascript Code: cblcurrentRequest = $.ajax({ url: baseurl + 'Login/getChannelBra ...

javascriptphpajaxcodeigniter

Background with funky Font Awesome colors

Font Awesome is working perfectly for me, but I'm experiencing an issue with strange borders appearing around the icons in Chrome. Interestingly, this problem doesn't occur in IE and Firefox browsers. What's even more peculiar is that the bo ...

htmlcsstwitter-bootstrapfont-awesome

Creating an animated sidebar that moves at a different speed than the rest of the

I have a layout with a large sidebar and small content, where the "Fixed part" refers to sticky positioning. I'm attempting to achieve this using scrollTop, but the sidebar is causing some issues like this: The code should only be executed when the ...

javascriptjqueryhtmlcssfrontend

Unlocking the Magic of JSONP: A Comprehensive Guide

Currently attempting to utilize JSONP in order to work around Cross Domain challenges. I referenced this solution: Basic example of using .ajax() with JSONP? $.getJSON("http://example.com/something.json?callback=?", function(result){ //response data a ...

javascriptphpjqueryajaxjsonp

Tips on replacing a React component's styling with emotion CSS

Is there a way to incorporate the background-color:green style to the <Test/> component in the following example without directly modifying the <Test/> component? /** @jsx jsx */ import { css, jsx } from "@emotion/core"; import React from "r ...

cssreactjsemotion

How can I dynamically retrieve the width of an image in React as the screen size changes?

I have successfully implemented an image hover effect on my website. When I hover over a certain text, an image appears. The image is responsive, but I am facing an issue where I want the width of the text to be equal to the width of the image. When I resi ...

javascriptreactjshtml

JSP form continues to submit despite JavaScript validation returning false

On my JSP page, I have a form named "deleteCont" and a JavaScript function called "validateDelete". When the user clicks the "Delete contact" button, the "validateDelete" function is triggered successfully, showing an alert message. Unfortunately, even whe ...

javascriptjqueryjsp

Angular, perplexed by the output displayed in the console

I'm completely new to Angular and feeling a bit lost when it comes to the console output of an Angular app. Let me show you what I've been working on so far! app.component.ts import { Component } from '@angular/core'; @Component({ ...

javascriptangulartypescript

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...

javascripthtmljquerycss

The function initiates without delay upon meeting the specified condition

I am looking to trigger a function automatically upon certain dynamically changing conditions in my JavaScript code. I attempted using the document.body.onload method, but it did not work as expected. document.body.onload = myFunction() function myFunct ...

javascript

What is the best way to target the nth-child() of a slotted element within a web component that utilizes multiple uniquely named slots?

I am struggling to select the second slotted item in a specific slot using slot[name=foo]::slotted(:nth-child(2)){, but it's not behaving as I anticipated. Even though the first foo slot is styled with green, the second one doesn't follow suit. ...

javascriptcssweb-component

What is the best way to adjust a wide HTML table to make it narrow enough to fit perfectly within the screen width?

I need assistance with formatting an HTML table that contains multiple columns: <table id="req_header" border="2" style="overflow: auto;"> <tr> <th><i class="fa fa-solid fa-check"> ...

javascripthtml

What is the best practice for importing React components?

In my experience with React, I've noticed two different ways of importing and extending components. The first way that I typically use is shown below. import React from 'react'; class SomeClass extends React.Component { //Some code } ...

javascriptreactjscomponents

Using a jQuery UI dialog for multiple checkbox selection. The post array cannot be saved for a multi-select until the dialog is opened

CSS <td class="cell"> <a class="opener" id="opener_'.$iterator.'" href="#" rel="#type_dialog_<?= $iterator; ?>">Click here</a> <div id="type_dialog_<?= $iterator; ?>" name="t ...

phpjavascriptjqueryhtmljquery-ui