Elevate the visual impact of a photo by adjusting its opacity

Looking to implement an image highlight effect when hovering over it? One approach is to reduce the opacity of the surrounding images while keeping the hovered image fully visible. If you've tried the code snippet below and encountered some issues, let's troubleshoot together.

Here's the HTML structure:

<div id="first">
<img id="image1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image3" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image4" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image5" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image6" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image7" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image8" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image9" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image10"src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
</div>

Your CSS styling may need adjustments:

#first:hover img
{                            /* PARENT HOVER */
    opacity:0.4;  
    cursor: pointer;                    /* Dim all */
}    
#first img:hover
{                            /* SINGLE HOVER */
    opacity: 1;                /* Max one */
    color:#000000;
    cursor: pointer; 
}
htmlcss

Answer №1

If you want to achieve this effect, using jQuery is the way to go. The code snippet below requires jQuery to work properly.

<script>
    jQuery(function($) {
        $('#first img').hover(function() { // When mouseover
            $('#first img').css({'opacity': 0.4}); // You can add animation effects as well
            $(this).css({'opacity': 1});
        }, function() { // When mouseout
            $('#first img').css({'opacity': 1});
        });
    });
</script>

Answer №2

@Randy, I noticed that in your code, when hovering over empty space or anywhere else, it behaves as if you are hovering over everything. Please review my code and confirm if it meets your requirements.

I have implemented a feature in my code where even if you hover between list items, it still functions correctly. Hopefully, this addresses the issue you raised. If not, please inform me of any other concerns.

Thank you for your attention...

Check it out Here

Code

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

Enable hovering only on the actual content within the box, not on the empty space

Currently, I am working on creating a navigation bar using flexbox. Everything seems to be functioning correctly except for one issue: when I hover over the space between my logo and the navigation links, it changes the color of my logo to the hover state ...

htmlcssflexboxhover

How to use jQuery to hide list items after a certain threshold

$('li[data-number=4]').after().hide(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li data-number="0"">1</li> <li data-number="1">2</li> ...

javascriptjqueryhtml

The date picker functionality provided by ngMaterial is currently malfunctioning within an AngularJS environment

Can anyone assist me with adding a date picker to an input box? I've come across ngMaterial which seems to provide the necessary features. Despite including all required files, I am encountering an error. angular.js:68Uncaught Error: [$injector:un ...

javascriptjqueryangularjshtmlangular-material

Struggling with setting margins effectively in Bootstrap for the desired layout

I am attempting to create two columns with space between them, but whenever I try to add a margin-right, one of the columns goes down. Can someone please assist me? <div class=row> <div class="boxi col-6"> Content here ...

htmlcssbootstrap-4

:after functionality not operating properly in Internet Explorer

The titles on this page have arrows displayed before them using a special styling. However, there seems to be an issue with how it displays on Internet Explorer. // edit : I made a mistake, my styling is actually on paragraph tags 'p'. Maybe tha ...

htmlcsscross-browsercross-platform

Components are colliding with one another in the realm of Bootstrap 5

I am in the process of developing a website using Bootstrap. However, I am facing an issue where certain elements are overlapping when I switch my website to a mobile responsive view, similar to the image here. This is how the site appears in the large ve ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for saving an array of objects in local storage and transferring it from one file to another

Recently delving into the world of localstorage, I've encountered an issue while attempting to store JSON data in one file and retrieve it in another. The JSON data below was fetched from a URL, and my goal is to obtain all the feed objects in the oth ...

javascriptjqueryjsonhtml

The issue of the cursor not showing up in Chrome within a nested contenteditable structure arises when applying CSS after the

Currently, I am coding a HTML document that includes an element with the attribute contenteditable set to true, but this element is wrapped inside a parent element with contenteditable set to false. The HTML structure looks like this: <div contentedita ...

javascriptjqueryhtmlcssgoogle-chrome

The functionality of the jQuery .click method appears to be malfunctioning within the Bootstrap

It seems like my JQuery.click event is not functioning as expected when paired with the corresponding button. Any ideas on what might be causing this issue? Here's the HTML CODE snippet: <button id="jan7" type="button" class="btn btn-dark btn-sm"& ...

javascriptjqueryhtmlcssbootstrap-4

CSS :contains selector after adding a script through Ajax append operation

Is there a way to change the text color in $('td:contains("text")').css('color','red') after an Ajax load script? Here is the main code snippet <div id="datatable"></div> <script src="https://code.jquery.com/j ...

javascriptjquerycss

Show the layout of the table in a visual format

I am struggling to showcase a table created using <ul> tags. I want the content to be displayed one after the other. Here is my code: CSS .activity-list-header > li { display: inline-block; text-align: left; width: 15.666%; list- ...

jqueryhtmlangularjscss

Strange glitch in the rendering of rectangles on HTML5 canvas?

While experimenting with pre-rendering sprites using HTML5 canvas, I encountered some strange behavior that appears to be a rendering bug. The issue can be seen in the following minimal example: var CT = document.getElementById("myCanvas").getContext("2 ...

javascripthtmlcanvas

Display or conceal a division depending on the content contained within it

I am attempting to conceal the image containers on these pages depending on whether there is an image uploaded for a specific event or if the container contains a placeholder image. The only distinction between the two images is the path to the image and t ...

jqueryhtmlshow-hide

Loading a local CSS file upon opening a tab with a specific URL

When opening a tab to load a local HTML file from an addon (using addon-sdk), the following code is used: tabs.open({ url: self.data.url('index.html'), onReady: myScript }); However, there seems to be no straightforward way to include a CSS ...

javascriptcssfirefox-addonfirefox-addon-sdk

Is there a way to have incoming messages automatically align to the left or right based on the sender, without using the float property?

I am currently working on a webpage where I want the messages sent by different users to appear in a yellow conversation window based on who sent them - user 1 or user 2. I want it to mimic the messaging layout commonly seen on phones, distinguishing betwe ...

javascripthtmlcss

Issues persist with the functionality of form validation as red error messages are not being displayed as anticipated using PHP, AJAX, jQuery,

Hey guys, I'm facing an issue with the error messages that show up during form validation. I think it has something to do with the variables $errors and $data in my PHP code or maybe a problem in the jQuery code. I followed a tutorial online to crea ...

phpjqueryhtmlmysqlajax

Refreshing a webpage to accurately display changes made in a CRUD application without the need for a hard reset

My to-do app is almost fully functional - I can create items, mark them as completed, and delete them using a delete button. However, there's one issue: when I delete an item, the page doesn't update in real-time. I have to manually refresh the p ...

javascriptpythonhtmlajax

CSS for positioning tabs by sliding

Can someone assist me with properly positioning my Sliding TAB? It appears fine in my browser, but on other computers with varying resolutions, it overlaps with another tab. If you'd like to view the site, click this LINK Below is the code I am usin ...

javascriptjquerycsscross-browser

Challenges with looping in Jquery animations

I've been working on an animation function that I want to run in a loop. So far, I've managed to get it to work for one iteration, but I'm struggling to figure out how to repeat the loop a specific number of times. Below is the code for my a ...

jquerycssanimationjquery-animate

How can I use CSS to change the background color of a fixed navbar when scrolling?

Is it possible to use only CSS to alter the background color of a fixed navbar once the user has scrolled past a specific point vertically? I am curious if this can be accomplished in CSS by targeting the ID of another element, or possibly its height? Alt ...

htmlcss