a shadowy see-through veil for division

I'm currently working on adding a dark transparent overlay to the product div whenever someone hovers over the product image. I've successfully created overlays for the entire screen in the past using similar logic, but this time it's behaving strangely. Despite trying to use mouseenter and mouseleave events, the overlay keeps appearing and disappearing even when my mouse pointer is still on the image. It seems like the overlay is targeting the entire screen instead of just the box1 element in jQuery.

Link to JSFiddle example

HTML

<div id="box1">
<img src="http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png" alt="orange" title="orange" />   
<a href="#">View Details</a>
</div>

CSS

div#box1 {
  border: #999 2px solid;
  width: 180px;
  height: 250px;
}

div#box1 > img {
  position: absolute;
  z-index: 2000;
  max-height: 240px;
}

div#box1 >a {
  display: none;
  position: absolute;
  top:100px;
  left: 40px;
  margin: 10px 0 0 10px;
  z-index:3000;
  background: white;
  text-decoration: none;
}

div#box1:hover a {
  display:block;
}

#mask {
  display:none;
  background: #000;
  position:fixed;
  left: 0;
  top: 0;
  z-index: 2500;
  width: 100%;
  height: 100%;
  opacity: 0.75;
}

JQuery

$('#box1 img').mouseenter(function () {
    $('#box1').append('<div id="mask"></div>');
    $('#mask').fadeIn(400);
});

$('#box1 img').mouseleave(function () {
  $('#mask').fadeOut(400, function () {
    $('#mask').remove();
  });
});

If you have any insights on what might be causing this issue or how I can fix it, your assistance would be greatly appreciated. Thank you!

jqueryhtmlcss

Answer №1

For this solution, I utilized CSS for styling. You can check out my implementation on JSFiddle - http://jsfiddle.net/7SNtR/

HTML

<div id="container"> 

<a href=""><div id="blue-box">
    <h2>More Info</h2>
</div></a>

CSS

    #container {
    border: #666 3px solid;
    width: 200px;
    height: 300px;
    background-image: url(http://example.com/images/sample.jpg);
    background-position: center;
    background-repeat: no-repeat;
}
#blue-box{
    text-align: center;
    font-size: 18px;
    color: #fff;
    background-color: rgba(26, 53, 95, 0.7);
    width: 100%;
    height: 100%;
    opacity: 0.0;
}

#blue-box:hover {
    opacity: 1.0;
}

h2 {
    padding-top: 120px;
}

Wishing you success with your project!

Answer №2

Here's a technique I shared in my comment, utilizing a pseudo element without the need for jQuery See DEMO: 

div#box1 {
  border: #999 2px solid;
  width: 180px;
  height: 250px;
  position:relative;
  text-align:center;
}
div#box1 > img {
  position: relative;
  z-index: 1;
  max-height: 240px;
}
div#box1 >a {
  display: none;
  position: absolute;
  top:100px;
  left: 40px;
  margin: 10px 0 0 10px;
  z-index:3;
  background: white;
  text-decoration: none;
}
div#box1:hover a {
  display:block;
}
div#box1:before{    
  content:'';
  background: #000;
  position:absolute;
  left: 0;
  top: 0;
  bottom:0;
  right:0;
  z-index: 2;
  width: 100%;
  height: 100%;
  transition:0.4s;
  opacity:0;
}
div#box1:hover:before{  
  opacity:0.75;
}

Answer №3

I managed to achieve the desired effect without using any jQuery, simply utilizing CSS elements. Here is the updated fiddle link for you to review: http://jsfiddle.net/5vW8b/2/. Hopefully, this meets your expectations.

Here are the key additions I made:

div#box1:hover > #mask{
    display:block;
}

In the CSS section, I included the above code snippet. Additionally, in the HTML part, I made the following changes:

<div id="box1">
    <div id="mask"></div> <!-- added this line -->
    <img src="http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png" alt="orange" title="orange" />   <a href="#">View Detail</a>

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

Using jQuery to replace special characters with their corresponding alphabet characters

Is there a way to remove special characters and alphabet from a variable using jQuery? For example, I have: var test = +985 But I want to extract the numerical value only, like this: var another = 985 I need to ensure that characters like "+" are not ...

phpjqueryregex

Displaying several column headers while filtering data in a table

Is there a way to prevent my table from printing multiple column headers each time I filter my results? For instance, after filtering, the same column headers are repeated. Here is an example of the issue: Below you can find the code snippet that demonstr ...

phphtmlmysqlhtml-table

Display the delete message URL according to the user's name

I have a wall message system using PHP and jQuery where messages from all users are displayed. Now, I want to add delete functionality to each message, but the delete link should only be visible to the user who posted the message. .childs { opaci ...

phpjquerycss

What is the best way to show a second button once the first button has been clicked?

Is there a way to show a second button only after the first one is clicked? I'm looking for a way to have a user click on a button, which then reveals another button. When this second button is clicked, the user should be taken back to the original b ...

javascripthtml

Tips for integrating magnific popup with ajax post and URL

Greetings everyone! Can anyone provide insights on how to integrate Magnific Popup with AJAX? I am looking to use it for inserting data after triggering the Magnific Popup. Below is a snippet of my code: $(function () { $('.popup-modal').m ...

phpjqueryajax

React and Material UI: troubleshooting problems with layout columns

I'm working on a project with three columns and I want to include a column for removing each row. Is it possible to add a "removing" column on the right? If so, how can I go about doing it? VIEW CODESANDBOX: HERE const CustomTableRow = ({ row, index ...

javascripthtmlcssreactjsmaterial-ui

The html() method is not functioning correctly in ajax requests

I would like to implement a feature where users can like and unlike a book. However, I am facing an issue where the code only executes once without refreshing the page. JAVASCRIPT <script type="text/javascript"> $(document).ready(function() { ...

phphtmlajax

Press and hold feature using CSS or JavaScript

When working with a jQuery draggable element, my objective is to change the cursor to a move cursor when clicking and holding the header. I have attempted using CSS active and focus properties, but so far no changes are taking place. ...

javascriptjquerycss

Add some pizzazz to your design using jQuery!

I have been working on a web application using asp.net c#. I have a div element where I applied the following style to it at the server side: spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden"); Now, I have a radiobutton list and ...

c#jqueryhtmlcss

Attempting to implement real-time AJAX search feature in the sidebar

I am fairly new to AJAX searching and still getting the hang of Rails. My goal is to add a search form to the sidebar of my app that appears on every page, with search results displaying on the current page only when a search query is entered. Currently, ...

javascriptjqueryajaxsearchruby-on-rails-4

What is the best way to retrieve declared functions within the done() scope of a jQuery plugin that handles JSON requests?

As I work on a jQuery plugin, my goal is to make it easily configurable and maintainable. To achieve this, I am focusing on keeping the functions short and testable. To accomplish this, I am implementing jQuery plugin code inspired by Addy Osmani's L ...

javascriptjqueryjsonasynchronous

Unable to stream Icecast link on Chrome browser

Recently, I encountered an issue with my custom-made player where no sound would come out when opened in Chrome. This has never happened before and I am puzzled as to why. Regardless of how the player is accessed - whether through a pop-up or by pasting th ...

htmlsslstreammedia-playericecast

Stopping the mouse from scrolling

I am facing an issue on my page where scrolling a textbox to the bottom causes the entire document to scroll as well. How can I prevent mouse scrolling on the document but still allow scrolling within the textbox when the mouse is over it? It's import ...

javascriptjqueryscrolljquery-events

using javascript to change a link's state with a click action

I have a question that is related to the topic discussed here: Making a link stay active displaying hover effect upon click using javascript. I am looking for a way to disable the active class when the same link is clicked again. Any assistance on this mat ...

javascriptjqueryhtml

Left-aligned border below titles that are centered

Is there a way to add a small border under a title tag using CSS? I found a solution using :after, but I'm encountering an issue when trying to center the title. h1:after{ content: ''; display: block; height: 4px; width: 60px; mar ...

css

Enter the Kannada language into the HTML text box or input field

My html form consists of about 15 - 20 input and textarea fields. As a user, how can I enter information in Kannda or any other local language? https://i.stack.imgur.com/60PVT.png ...

javascriptjqueryhtmlcss

Transmit a combination of selection and text inputs through AJAX to PHP, and then save the data in a

Is it possible to send multiple inputs (one text and one select multiple) via AJAX to a PHP file? The data is successfully sent using form serialize, as evidenced by the complete array in prod_multi when logging with console.log. However, I am facing an is ...

phphtmljqueryajax

Tips for verifying on the click of a button

Having trouble solving my issue as a newbie to HTML and jQuery. The problem at hand is: In my website, I need to implement username validation. This validation involves checking the entered username against a MySQL database. If the database contains the ...

phpjqueryhtmlmysql

Exploring Vue's data binding with both familiar and mysterious input values

How can I model an object in Vue that contains both known and unknown values? The quantity is unknown, but the type is known. I need to present user inputs for each type, where the user enters the quantity. How should I approach this? data() { retur ...

javascripthtmlvue.jsdata-binding

Styling a div box

I've been experimenting with CSS on a div for a while now, but I'm still struggling to replicate the image below. If anyone can offer some guidance, it would be greatly appreciated. I'm looking for a solution involving a div or another elem ...

htmlcss