Fade in/out overlay effect when clicking on a content block

I've hit a roadblock while trying to implement overlay fading in and out to cover a block created by some JavaScript code.

Here is a link to the project. When you click on any of the continents, a series of blocks with country flags will appear. You'll also notice a gray bar labeled "some content". I'd like that bar to remain hidden until a flag is clicked. Once a flag is clicked, I want the overlay to slide over it. Then, if you click outside the block, the overlay should slide out and disappear.

CodePen link.

I attempted to set:

&__block-overlay {
  ....
  opacity: 0;
  ....
}

and

&__block-overlay:active {
  opacity: 0.7;
}

However, my attempts were unsuccessful.

If you have any suggestions or solutions, I would greatly appreciate it!!

javascriptjqueryhtmlcss

Answer №1

In order to address the issues at hand, there are two main tasks to tackle. The first one involves concealing the 'Some Content' bars. This can be accomplished by applying the overflow: hidden property to their parent element, ensuring they only become visible when hovering over the flag:

&__block {
  display: inline-block;
  width: 25%;
  margin: 0.5%;
  height: 150px;
  text-align: center;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  overflow: hidden; /* don't forget to add this */

To toggle the visibility of the content upon successive clicks, it is recommended to utilize the toggleClass() method instead of addClass():

blockClicked(e) {
  const $block = $(e.target.closest('.js-block'));
  $('.details-open').removeClass('details-open');
  $block.toggleClass('details-open');
},

Check out the Updated CodePen here

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

Animating a dropdown menu with jQuery

I have a typical submenu structure set up like this: <ul> <li> <a href="#">Parent link</a> <ul> <li><a href="#">Submenu link</a></li> </ul> </li> </ul> In my de ...

javascriptjquerycssanimationdrop-down-menu

Tips for displaying previous values when discarding changes to a record in a material-ui table

How can I prevent changes from reflecting in a material-ui table when clicking on the X icon while editing a row? Is there a way to only save the edited record on the check (_) icon instead? Any suggestions or solutions would be greatly appreciated as I am ...

javascriptreactjsmaterial-ui

forming a boundary that stands alone, unattached to any other boundaries

I am trying to design a navigation bar that resembles the one depicted in the image provided. The concept involves creating a navigation bar where each border is separated from the others, potentially achieved using hr tags. However, I am struggling to fi ...

htmlcssborder

Using Three.js to showcase 3 different slices of heatmaps within a 3D environment

I'm working on using Three.js to create a 3D representation of a matrix. Each 2D plane in the matrix should be displayed as a 2D heatmap. Here is an example of what I'm aiming for: https://i.sstatic.net/Kj5yb.png My current obstacle is figuring ...

javascript3dthree.js

The seamless flow of web design

Seeking guidance on creating a responsive web page. I have a functional website that looks great on my 13" MacBook, but encounters distortion at different screen sizes. What steps are necessary to ensure it appears crisp and appealing on any device? Should ...

javascripthtmlcss

Having trouble with jQuery field validation not functioning as expected?

I'm trying to implement user input validation when the submit button is clicked, but I can't seem to get it to work. Using jQuery $(document).ready(function() { function validateForm() { if ($('#u').value() == '') ...

jqueryhtmlvalidation

Creating a Singular Instance for Dynamically Loaded Module in Next.js

I'm currently working on creating a Singleton instance for a dynamically imported module in my Next.js app. However, the problem is that each time I call getInstance, it initializes a new instance instead of reusing the existing one. The following co ...

javascriptnext.js

Is it possible for JavaScript to access and read a local file from a web page hosted locally

I am interested in using html, css, and javascript to develop a user interface for configuring a simulation. This interface will be used to generate a visualization of the simulation and an output parameters file based on multiple input files. It is impor ...

javascriptfilelocalhtml

Highcharts memory leakage issue arises when working with jQuery version 2.X

After extensive testing on my AngularJS application, I have discovered a memory leak when using Highcharts with the latest version of jQuery (2.1.4). Below are links to two plunkers for comparison: Using jQuery 1.8.2: http://plnkr.co/edit/lQ6n5Eo2wHqt35OV ...

javascriptjqueryangularjsmemory-leakshighcharts

Is there a way to pre-load the data prior to the component rendering in ReactJS?

The main goal of my project is to retrieve data from the Google Analytics API and display it as a list. Although I am able to successfully fetch the data from the API, I am encountering an issue when passing it to another component. While I can view the da ...

javascriptfunctionreactjsgoogle-analytics

Is it possible to specify the same attribute multiple times within an HTML5 element?

After reviewing the HTML5 specification (W3C Recommendation 28 October 2014), I am unable to locate any specific information on whether an element can have the same attribute specified multiple times. For instance, the attribute style sometimes has a lengt ...

htmlattributes

In ReactJS, when passing an array of objects to a child component, the first instance may sometimes return as undefined, causing the code to break

Currently, I am in the process of creating a personal blog for my brand. The "Posts" section is designed to retrieve data from a basic JSON via an API. At present, I have used mirageJS to mock the API and employed the useEffect and useState hooks to set th ...

javascriptreactjs

PHP dropdown menu is a dynamic feature that provides users

Can anyone help me identify the issue with this code? I am struggling to display the sub menu... I suspect the problem lies in the section where I retrieve the sub menu from the database. However, upon inspection, everything seems correct... It's po ...

phpcssdrop-down-menu

Govern Your Gateway with Expressive Logs

I'm facing some issues with the logs in my Express Gateway: Although I followed the documentation and enabled Express Gateway logs, I cannot locate any log files under my gateway root directory. Whenever I start the gateway using the command LOG_L ...

javascriptnode.jsexpressexpress-gateway

Utilizing the Fetch API to retrieve a Flickr feed in JSON structure

When interacting with the flicker feed API, I have successfully received a JSON response using $.getJSON. However, when attempting to use Fetch instead, only an XML response seems to be retrieved. Example of working with $.getJSON: var flickerAPI = "http ...

javascriptjsoncorsfetch-apiflicker

Having trouble connecting the HTML file with the JavaScript file

This is my unique HTML file <!DOCTYPE html> <html> <head> <script src="ll.js"></script> </head> <body> <link rel="stylesheet" href="home.css"> ...

javascripthtmlcssstatic-linking

having difficulty accessing the value within the Angular constructor

My current issue arises when I click on a button and set a value within the button click method. Despite declaring the variable in the constructor, I am unable to retrieve that value. The code snippet below demonstrates this problem as I keep getting &apos ...

javascriptangulartypescript

jQuery scrollTop animates to the start of the webpage

Upon loading the page, the div appears at the top of the screen but then jumps to its correct position once scrolling begins. To view the website, click on this link: calretirement.com/classes-test.php CSS: .register{position:fixed !important; bottom:1 ...

javascriptjqueryhtmlcss

Customize your QTabBar icons with Qt Stylesheet: Adjusting the icon mode

I am currently working on customizing a QTabBar with a stylesheet in my tool. I use QIcon to create icons for the tabs, allowing me to set different modes such as normal, disabled, and selected. The challenge I am facing is trying to apply a global stylesh ...

cssqtqt4

Explaining how to iterate through objects (one by one) in the This.questionnaire.Profile at every click using JavaScript (answer not found in forums)

Creating a series of questions, each part being stored in This.question = {p1: {...}, p2: {...}, p3: {...}, p4: {...}, p5: {...} etc. (and many more). I want to be able to switch from one article to the next every time I click a button... click => next ...

javascripthtml