CSS link in overlay taking over a div

Question

I have a <div> that contains a link.

At the bottom right corner of this <div>, I have an overlay element which takes over the whole <div> when hovered.

This overlay element also contains a link.

My problem is that the link in the overlying element is not clickable.

The problem is because I use pointer-events: none; on class .overlay-content, but if I don't use it, both links become dead.

Please see code here:

.panel-default1 {
  padding-top: 10px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 400px;
  width: 400px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}

.amg-corner-button_wrap {
  display: block;
  background-color: #e8c63d;
  position: absolute;
  transform: rotate(45deg);
  right: -320px;
  bottom: -320px;
  width: 400px;
  height: 400px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.amg-corner-button_wrap:hover {
  transform: rotate(45deg) scale(4);
}

.overlay-content {
  pointer-events: none;
  bottom: 0;
  color: #333;
  left: 0;
  opacity: 0;
  padding: 30px;
  position: absolute;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  right: 0;
  top: 0;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.overlay-content h2 {
  border-bottom: 1px solid #333;
  padding: 0 0 12px;
}

.amg-corner-button_wrap:hover~.overlay-content {
  opacity: 1;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

<div class="panel panel-default1">
  <div class="panel-body">
    <a href="#">Link</a>
    <div class='amg-corner-button_wrap'></div>

    <div class="overlay-content">
      <h2>Image Ink Logo</h2>
      <a href="#">Link</a>
    </div>

  </div>
  <!-- panel body -->

</div>
<!-- panel default -->

Also, here is fiddle.

Is there any way that I can achieve this?

Answer 1

can't believe I actually found a pure CSS solution without any drawbacks.

.panel-default1 {
  padding-top: 10px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 400px;
  width: 400px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}

.amg-corner-button_wrap {
  display: block;
  background-color: #e8c63d;
  position: absolute;
  transform: rotate(45deg);
  right: -320px;
  bottom: -320px;
  width: 400px;
  height: 400px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.wrap:hover .amg-corner-button_wrap {
  transform: rotate(45deg) scale(4);
}

.overlay-content {
  pointer-events: none;
  bottom: 0;
  color: #333;
  left: 0;
  opacity: 0;
  padding: 30px;
  position: absolute;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  right: 0;
  top: 0;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.overlay-content h2 {
  border-bottom: 1px solid #333;
  padding: 0 0 12px;
}

.wrap:hover .amg-corner-button_wrap ~ .overlay-content {
  pointer-events: auto;
  opacity: 1;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

<div class="panel panel-default1">
   <div class="panel-body">
     <a href="#">Link</a>
     <div class="wrap">
        <div class='amg-corner-button_wrap'></div>
        <div class="overlay-content">
          <h2>Image Ink Logo</h2>
          <a href="#">Link</a>
        </div>
    </div>
  </div> <!-- panel body -->
</div> <!-- panel default -->

JSFiddle

Instead of listening to the :hover event on the corner-button, listen to it on a parent element. Since the :hover will be dispatched regardless of the mouse interaction of the elements' children, it is possible to set pointer-events: auto to the children containing links (overlay-content), once the corner-button has been hovered. Now, that the overlay-content is hoverable and since it's a child of the wrapping div, it will cause the :hover to stay active over the whole wrapping div.

Answer 2

Here's a working fiddle for a css and html only change: https://jsfiddle.net/y2auh7gn/4/.

It separates the link from overlay-content and places it where it's supposed to be with position: absolute. We need to move the link out of overlay-content so that when we hover over it the overlay doesn't disappear.

There's a side-effect where the link pops out with the corner piece.

Answer 3

Here is half a solution using animations instead of transitions. This works for when you hover on to the amg-corner-button_wrap but not when you move off it. I'm a bit new to animations so hopefully someone here who knows more maybe able to help you with the second half.

There is also a weird visual in here if you hover on the amg-corner-button_wrap and hover off mid transition. The reason for this is that I added a background color to overlay-content so when it's fading in and you mouse off amg-corner-button_wrap the swipe starts to reverse before the fade is complete.

Anyway, hope this 50% solution helps you or others drive this to 100%! Have to run to a meeting, good luck :-)

@keyframes example {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  1% {
    visibility: visible;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

.panel-default1 {
  padding-top: 10px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 200px;
  width: 200px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}

.amg-corner-button_wrap {
  display: block;
  background-color: #e8c63d;
  position: absolute;
  transform: rotate(45deg);
  right: -120px;
  bottom: -120px;
  width: 200px;
  height: 200px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.overlay-content {
  visibility: hidden;
  opacity: 0;
  background-color: #e8c63d;
  bottom: 0;
  color: #333;
  left: 0;
  padding: 30px;
  position: absolute;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  right: 0;
  top: 0;
}

.overlay-content h2 {
  border-bottom: 1px solid #333;
  padding: 0 0 12px;
}

.overlay-content~.amg-corner-button_wrap,
.amg-corner-button_wrap:hover {
  transform: rotate(45deg) scale(4);
}

.amg-corner-button_wrap:hover~.overlay-content,
.overlay-content:hover {
  animation-name: example;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-delay: 0.3s;
  animation-fill-mode: both;
}

<div class="panel panel-default1">
  <div class="panel-body">
    <a href="#" onclick="alert('outer')">Link</a>

    <div class='amg-corner-button_wrap'></div>

    <div class="overlay-content">
      <h2>Image Ink Logo</h2>
      <a href="#" onclick="alert('inner')">Link</a>
    </div>

  </div>
  <!-- panel body -->

</div>
<!-- panel default -->

Answer 4

I would recommend using JS style swapping instead of CSS pointer events for this problem. You need to trigger one change to your css when you mouse over the bottom corner, and a separate event when you mouse out of the container. I do not believe CSS gives you that kind of conditional control.