Right side of image not clickable

How come only the left side of the play image is clickable?

To reproduce Right mouse click on the right side of the play image, nothing happens.

Why is this happening and how is it fixed?

The whole play image should be clickable.

That is the whole issue I am having.

Nothing happens when clicking on the right side of the play image.

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
     
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    const thewrap = curtain.parentElement.querySelector(".container");
    show(thewrap);
  }

  const cover = document.querySelector(".jacketa");
  cover.addEventListener("click", coverClickHandler);
}());
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.curtain {
  position: relative;
  width: 100%;
  height: 100%;
}

.curtain.slide {
  height: auto;
  min-height: 100%;
  overflow: hidden;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 10s;

  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("https://picsum.photos/1920/1080");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.panel-right::before {
  left: -100%;
}

.curtain.slide .panel-left {
  transform: translateX(-100%);
}

.curtain.slide .panel-right {
  transform: translateX(100%);
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.jacketa {
  position: absolute;
  top: 40px;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
  box-shadow: 0 0 20px 2px #f9066bf7;
   display: block !important;
}
.j1 .jacketa {
  left: 30px;
}

.j2 .jacketa {
  right: 30px;
}

.jacketa .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.jacketa .coversvg {
  width: 70px;
  height: 75.4px;
  fill: none;
  stroke-width: 4px;
  stroke-miterlimit: 10;
}

.jacketa .coversvg .back {
  stroke: #000;
  opacity: 0.15;
}

.jacketa .coversvg .front {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flicker-1 {

  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0;
  }

  43% {
    opacity: 0;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  49.01% {
    opacity: 1;
  }
}

.split-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 260px;
  margin: auto;
  border-radius: 50%;
  transition: 10s ease;
}

.j1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.j2 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.container {
  height: auto;
}

.curtain.slide .j1 {
 left: -500%;
}

.curtain.slide .j2 {
  left: 500%;
}

.hide {
  display: none;
}
<div class="curtain">
  <div class="outer">
    <div class="tcell">

      <div class="container hide">
        <div class="container-top">
        </div>
      </div>

      <div class="panel-left"> </div>
      <div class="panel-right"> </div>

      <div class="split-wrap">
        <div class="j1">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>
        </div>
        <div class="j2">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>


        </div>
      </div>

    </div>
  </div>
</div>



Read more here: https://stackoverflow.com/questions/68465290/right-side-of-image-not-clickable

Content Attribution

This content was originally published by htmlcsscoding at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: