CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bismo Funyuns
Bismo Funyuns

Reputation: 73

Content block overlay fade in/out on click

I'm stumped on a problem with overlay fading in and out to cover a block generated by some JS code.

Below is the link to the work. If you click on any of the continents, a bunch of blocks with the country flags will be generated. You'll also see the gray bar that says "some content". Ideally, I want that bar to be hidden, until I click on one of the flags. At which point, the overlay would slide in over the flag. Then when I click elsewhere outside the block, the overlay would slide out and disappear.

CodePen link.

I tried to set:

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

and

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

But it didn't work.

Any suggestions would be greatly appreciated!!

Upvotes: 1

Views: 339

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

There's two issues to solve here. The first is the hiding of the 'Some Content' bars. You can achieve that by setting overflow: hidden on their parent, so that they are only visible when 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; /* add this */

Then, to toggle the content visibility on successive clicks, use toggleClass() instead of addClass():

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

Updated CodePen

Upvotes: 1

Related Questions