Is it possible for me to create two images with varying opacities using jQuery hover?

I am having an issue with the small rounded button on my effect. I want it to be fully opaque and still clickable, but currently it is taking on the opacity of the entire link. If I adjust the z-index, the button goes on top of the link but then the fancybox does not launch.

.img-hover > a  {
    position:relative;
}
.img-hover {
    display:inline-block;
    position:relative;
    cursor:pointer;
}
.img-hover .hover {
    display:none;
    background:#000;
    border-radius:50px;
    height:35px;
    width:30px;
    font-size:42px;
    font-weight:bold;
    color:#fff;
    padding:10px 15px 20px 20px;
    position:absolute;
    cursor:pointer;
    right:180px;
    top:180px;
}

If you'd like to view the code, here is the jsfiddle I created http://jsfiddle.net/W9uju/1/

Thank you for any help in advance!

jquerycsshoverz-index

Answer №1

To control layering order, adjust the z-index and utilize the following code snippet:

$(function() {
    $(".img-hover").hover(
        function() {
            $(this).children("a").fadeTo(200, 0.5).end().children(".hover").show();
        },
        function() {
            $(this).children("a").fadeTo(200, 1).end().children(".hover").hide();
        });
}).on('click',function(e){
    if($(e.target).hasClass('hover'))
        $(this).find('.fancybox')[0].click();
});

View DEMO

In more recent browsers, you can also apply pointer-events:none;

View DEMO with pointer-events

Answer №2

Edit:

Apologies, it seems I misunderstood your requirements. Here is an example that aligns with what you are looking for:

http://jsfiddle.net/W9uju/9/

Utilize rgba or hsla for the background color:

rgba(0,0,0,0.5);

rgba(
  0,  // R red
  0,  // G green
  0,  // B blue
  0.5 // A alpha
)

hsla(0,0%,0%,0.5);

hsla(
  0,  // H hue
  0%, // S saturation
  0%, // L lightness
  0.5 // A alpha
)

To ensure compatibility across different browsers, consider including the following:

background-color: #000; /* Old browsers (IE8<) */
background-color: hsla(0,0%,0%,0.5); /* Modern browsers */

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

Get the parent container's URL easily with jQuery!

I am trying to retrieve the URL of the parent container in this scenario: $(this).find('a:first'); This code works perfectly for fetching the URL of the first link within the same container as the button clicked. However, I want to expand this ...

jquery

Utilizing jQuery in combination with HTML and CSS

I'm having an issue with implementing jQuery animations for adding a new row on form submit. Additionally, I need to dynamically add and remove classes with animation effects without altering the HTML or CSS files (as this project is for school). Her ...

jqueryhtmlcss

Regarding the presentation, we should ensure that we include the initial image from the slideshow at the beginning of the

I am encountering a problem with the images in the slideshow getting listed. I want to display only the first image in the list when the code is run, and have the rest of the images appear manually through clicking. Any assistance regarding this issue wou ...

javascripthtmlcssslideshow

Invoke a CoffeeScript function within a jQuery function

Two files are causing me trouble: one is written in plain jQuery, and the other is a Coffeescript The jQuery file looks like this: $(document).ready(function(){ checkPrice(); }); In comparison, the CoffeeScript file appears as follows: $ -> c ...

javascriptjqueryfunctioncoffeescript

The tab navigation feature is experiencing issues in Internet Explorer versions 7 and 8

I have successfully implemented a tab menu that functions well in Chrome and IE 9,10. However, it does not seem to work in IE 7 or 8. I am at a loss regarding what changes need to be made to my code. Could anyone provide assistance? Link to Code Example ...

jquerycsscross-browser

Avoid having the java applet destroyed when the container is hidden

I am working with multiple DIVs, each containing text, a java applet (unfortunately...) and buttons. I am currently creating a search function to dynamically show and hide these DIVs. However, whenever I use display:none on a DIV, the applet inside it se ...

javajavascripthtmlcssapplet

How to Align Items Horizontally in React Material UI Grid for Containers of Varying Item Counts

I've been utilizing the React Material UI Grid System to arrange my elements on the page, which utilizes flexboxes internally. While everything is functioning properly, I'm struggling with horizontally aligning items in containers that have vary ...

htmlcssreactjsflexboxmaterial-ui

Stopping a velocity.js animation once it has completed: is it possible?

For the pulsating effect I'm creating using velocity.js as a fallback for IE9, refer to box2 for CSS animation. If the mouse leaves the box before the animation is complete (wait until pulse expands and then move out), the pulsating element remains vi ...

javascriptjquerycssanimationvelocity.js

Utilizing an additional parameter for z-index in Three.js: A step-by-step guide

My current approach involves utilizing a customized orthographic projection matrix to place my flat sprite objects. However, I am facing an issue where the depth of the projection cannot be calculated linearly based on their positions alone; it is determ ...

javascriptthree.jsz-indexdepth-buffertopological-sort

UpdatePanel Animation kicks in only after a Timeout

Let's consider this particular situation: Master Page File 1: <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Frame.master.vb" Inherits="Project.Frame" ClientIDMode="Static" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

jqueryasp.netupdatepanelupdatepanelanimationexte

Navigate to a section that has been dynamically loaded through ajax

My page displays a list of products in alphabetical order, with the products dynamically loaded via ajax as the user scrolls. At the top of my page, I have an alphabet list (A-Z) that allows users to click on any letter to jump to the list of products st ...

javascriptjqueryhtmlajax

Tips on emphasizing all div elements and incorporating navigation to each of them

I am seeking a method to enhance a div with highlighting when there is a click or mouseover event. For instance, changing or adding a border color using JavaScript on click or mouseover is straightforward. Recently, I have been contemplating the idea of a ...

javascriptjquerycsshtml

Retrieve and transmit the row identifier

I have a client who requires a popup to display details or allow for editing, but they also want the option to access these buttons (details or edit) at the top of the table (outside the table) rather than for each individual row. Therefore, I need to extr ...

javascriptjqueryajaxasp.net-mvc

Conceal Pictures within Sources Section

On my webpage, I have included images with information about my project. To prevent users from downloading the images, I disabled the download option. However, users are still able to access all the images in the Sources tab by inspecting the page. Can a ...

javascripthtmlcss

Choose several identifiers that possess strikingly similar titles

I am dealing with a form that is dynamically generated by a third-party provider and unfortunately I am unable to modify it... However, I am looking for a solution to select all IDs that begin with the same string, such as: easi_fielddiv_LastName, easi_fi ...

javascriptjqueryhtml

Implementing automatic activation of a tab upon page load using Angular

I am currently working with a set of Bootstrap nav pills in my navigation bar. The 'ng-init' code in my Angular script sets the 'dateState' to 'past' on page load. However, I have noticed that the 'Past Events' nav p ...

javascripthtmlcssangularjs

Troubleshooting: Issue with jQuery Ajax not receiving JSON response

Here is the JavaScript code I am using: $.ajax({ url: 'CheckColorPrice.php', type: 'POST', data: { url: '<? ...

javascriptphpjqueryajaxjson

REACT: Implement a feature to add a distinctive border around the currently selected image

When selecting a picture, I would like to have a border around it. Specifically, if out of 6 pictures I choose 3, I want highlighted borders around those selected images. How can this be achieved? EDIT: I am utilizing React to address this issue. ...

javascripthtmlcssreactjs

Problem with JQuery when iterating over Form components

I am currently working on a form validation function that loops through all the elements in a form. The goal is to keep the submit button disabled if any element is empty (the button is initially disabled), and enable it only when all input values are fill ...

javascriptjqueryhtmlasp.net-mvc

Header appearing at the same level as post title due to overlapping

After rearranging the date header below my post title on Blogger, I encountered an issue where on the latest post, the date was overlapping with the header. Adjusting the margin or padding affected other date headers, leaving me unsure of what to do next. ...

htmlcssdatetemplatesblogger