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

Eliminate redundant XML entries when using jQuery autocomplete

Does anyone know how to prevent duplicate records from appearing in a jQuery autocomplete dropdown? I am pulling data from an XML file and want to ensure that each record is unique and only displayed once. You can see the issue here ...

javascriptjqueryhtmlajaxxml

DiscordjsError: The client attempted to use a token that was not accessible

Hey there, I'm currently working on implementing a bot for my server and encountered an issue while attempting to create a member counter for voice channels. After completing the setup, I ran node index.js in the terminal, only to receive an error ind ...

javascriptnode.jsdiscorddiscord.js

Use jQuery to permit only numeric characters and the symbol "-" to be entered into a textbox

I have been working on a JQuery script that only allows users to input numbers in a text field. However, I am now trying to modify the code to also allow users to enter "-" (hyphen), but so far it's not working as expected. If anyone can provide assis ...

javascriptjqueryhtmlcss

Angular JS basic API: Displaying only information that starts with the term 'request'

I've been given the task of developing a straightforward AngularJS API. I have managed to set up the basics for displaying data, but I'm facing an issue where the table only retrieves data from the JSON file if it starts with "request". As a resu ...

javascripthtmlangularjsapiangularjs-ng-repeat

jQuery does not function properly when used with string variables

Why am I experiencing different results in Google Chrome when using a hard-coded string versus storing the same string in a variable? While the hard-coded string works properly, the same string stored in a variable does not produce the expected outcome. ...

javascriptjquery

Encountering a React JS error with Admin on Rest while making an API request

When making an API call (GET) with React.js using Admin on Rest, I encountered an issue. The server returns data when calling localhost:5001/cities, but there seems to be an error on the client side as indicated by the browser log: failure.js:18 Error: Th ...

javascriptrestreactjsadmin-on-rest

Tips for creating a zoomable drawing

I have been working on this javascript and html code but need some assistance in making the rectangle zoomable using mousewheel. Could someone provide guidance? var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var width ...

javascripthtmlcanvas

I am unable to access the state after setting it in useEffect in React. Why is this happening?

After rendering the component, I utilize socket io to send a socket emit in order to fetch data within the useEffect hook. Subsequently, I also listen for the data that is returned. However, upon receiving the data back from the socket, I update the stat ...

javascriptreactjsreact-hooks

Encountering issues with integrating interactjs 1.7.2 into Angular 8 renderings

Currently facing challenges with importing interactive.js 1.7.2 in Angular 8. I attempted the following installation: npm install interactjs@next I tried various ways to import it, but none seemed to work: import * as interact from 'interactjs'; ...

javascriptnode.jsangulartypescriptsingle-page-application

CSS inset box-shadow creates a gap between collapsed borders

I need help with a strange issue I'm facing. I have a table where border-collapse is set to collapse, and there's an unusual gap between the box-shadow inset and the border. The size of this gap increases as the border width gets larger. How can ...

htmlcss

When accessing a method exposed in Angular2 from an external application, the binding changes are lost

In my code, I have a method that is made public and accessible through the window object. This method interacts with a Component and updates a variable in the template. However, even after changing the value of the variable, the *ngIf() directive does not ...

javascriptangulartypescriptobservableangular2-changedetection

incorrect sequence of div elements appearing vertically

I'm having trouble organizing the header, page title, and navigation bar on my webpage. Despite my attempts to structure them correctly, they are not displaying in the desired order as shown below: https://i.stack.imgur.com/A3rQe.jpg The issue arises ...

htmlcss

The try and catch block in JavaScript is failing to correctly capture the HTTP status

I have a function that successfully posts JSON to an API endpoint. Here is the code I am using: function sendValuesPageLoad(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { try { if (xhr.readyState === ...

javascripthtmljsonxmlhttprequest

AngularJS uses variables defined by using curly braces like {{"message"}}

I am currently utilizing the following code snippet to monitor route changes: $scope.$on('$routeChangeStart', function (event, toState, toParams, fromState, fromParams) { //content $log.log(toState); } Whenever I print out "toState ...

javascriptangularjs

Creating a jQuery tab plugin that utilizes an external method

Here is a simple tab plugin that I developed. I am looking for suggestions on how to make it easier to switch tabs using an external method. /** * Custom jQuery Tabs Plugin */ (function($) { $.fn.customTabs = function(options) { var default ...

jquery

Issue with Express.js res.append function: Headers cannot be set after they have already been sent

I encountered an issue in my express project where I tried to set multiple cookies using "res.append" in the same request, but I kept getting an error saying "Error: Can't set headers after they are sent.". Can someone help me identify the problem and ...

javascriptnode.jsexpressweb-applications

What could be causing the lack of functionality in my nested CSS transition?

My markup includes two classes, fade-item and fade. The fade class is nested within the fade-item class as shown below: <a class="product-item fade-item" (mousemove)="hoverOn(i)" (mouseleave)="hoverOff(i) > <div class= ...

htmlcsssass

Automatically activate the next tab in Bootstrap

I have a modal that performs a count. Once the count is completed, the modal closes. My goal is to automatically switch to the next tab in Bootstrap when the modal closes. Here is the HTML: <ul class="nav nav-tabs namelocationtable"> <div clas ...

javascriptjqueryhtmltabsbootstrap-modal

Tips for positioning an MUI element inside a container to extend to the edge of the browser window

Currently, I'm working on a project with a Material-UI (MUI) container that contains a Stack element. Within this Stack, there are two Box elements displayed in a row, each set to take up 50% of the width. In my design, I want the second box to break ...

htmlcssreactjsmaterial-ui

Choosing the Right Language for AngularJS 2: TypeScript, JavaScript, or Dart?

AngularJS 2 is on the horizon, and the documentation recommends three languages: Typescript, Javascript, and Dart. As someone who primarily works with Javascript EcmaScript 5, I'm curious about the strengths and weaknesses of these three options. Cu ...

javascripttypescriptdartangular