html : 이미지를 가리켰을 때 팝업된 후 버튼을 클릭 가능하게 만들려면 어떻게 해야 하나요?

따라서 이미지 위에 마우스를 올리면 이미지 위에 버튼이 표시되지만 클릭할 수는 없습니다. 링크 또는 이미지를 보유하고 있는 div 내부의 모든 항목에도 동일하게 적용됩니다. 이걸 어떻게 극복할 수 있을까 싶었다.

내 HTML

<div class="content_img">          <img [src]="mydata.image.original" >          <div >            <button type="button"class="btn btn-primary"> Description </button></div></div>

내 CSS

/* Parent Container */
.content_img{
  position: relative;
  width: 90%;
 }
 /* Child Text Container */
 .content_img div{
  position: absolute;
  bottom: 0;
  right: 0;
 background:black;
  color: white;
  margin-bottom: 5px;
  font-family: sans-serif;
  opacity: 0.7;
  visibility: hidden;
  -webkit-transition: visibility 0s, opacity 0.5s linear;
  transition: visibility 0s, opacity 0.5s linear;
 }
 /* Hover on Parent Container */
 .content_img:hover{
  cursor: pointer;
 }
 .content_img:hover div{
  width: 100%;
  height: 100%;
  visibility: visible;
  opacity: 0.75;
 }

누군가 저 좀 도와주세요