0

I am having quite a problem. I am working on a grid, there is until now looking like this:

Demosite

I am making the code on localhost, and have to copy/paste the code to a CMS system. When I add the code I have to click a small tool icon: Image of backend

The problem is I cannot click that icon because apparently the overlay is laying over the clickable icon. It is working if I change:

.overlay {
    opacity:0;
  }

to

.overlay {
    opacity:1;
  }

but then there is a constant overlay over the grid elements, which is not the meaning.

Does anybody know any creative solution for this?? 

.image-overlay {
    position:relative;
  }
  .overlay {
    position:absolute;
    transition:all .3s ease;
    opacity:0;
    transition:1.9s;
    background: #00b1bab8;
  }
  .image-overlay:hover .overlay {
    opacity:1;
  }
  .overlayFade {
    background: rgba(27, 27, 27, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 15px;
    padding-left: 35px;
    padding-right: 35px;
  }
Mukul Kant
  • 7,074
  • 5
  • 38
  • 53
MK-DK
  • 1,075
  • 1
  • 11
  • 27
  • `pointer-events: none;` might be your solution see https://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements, `opacity: 0%;` will not make the element invisible to clicks, only visually. – joshmoto Aug 08 '18 at 02:58
  • or use `z-index:` to raise the icon above the overlay – joshmoto Aug 08 '18 at 03:02
  • I do not have access to edit in the icon. The `pointer-events: none;` class makes another box not open :-/ – MK-DK Aug 08 '18 at 03:04
  • can you add css to the system, theoretically you should be able to target anything if you can add your own css? Including the icon. – joshmoto Aug 08 '18 at 03:06
  • @joshmoto: Thank you for the comments. The site consist of over 50.000 pages, and have a very very strict backend system. Therefore I cannot touch any of those things. – MK-DK Aug 08 '18 at 03:08
  • I had a look at your demo and cant see an icon. But if you can add your own css, like the css above, you can change almost anything. If I could see the icon in your demo i could show you, but I can only see overlays and images. – joshmoto Aug 08 '18 at 03:11
  • It is just some piece of code I took out and on my own domain. It is not possible for me to touch the icon. The icon is loaded way before the CMS editor. – MK-DK Aug 08 '18 at 03:12
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/177602/discussion-between-joshmoto-and-mk-dk). – joshmoto Aug 08 '18 at 03:14
  • 1
    Please provide a [MCVE] in the question itself. I can be difficult determining the issue from an entire web page. Further more, reducing the problem down to a smaller reproducible problem may lead you to the solution. – Jon P Aug 08 '18 at 04:35

1 Answers1

0

Just add z-index to it

.overlayFade {
    background: rgba(27, 27, 27, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 15px;
    padding-left: 35px;
    padding-right: 35px;
    z-index:0;
  }
Minal Munakarmi
  • 177
  • 4