JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pictureBoxWrapper1">

<div class="img1" id="momClickable">- img 206x206 here - 

<div class="topIcon1"><a href="#"><img src="http://placehold.it/45x45" border="0" /></a></div>
</div>
</div>

CSS

.img1 {
    	width:206px;
    	height:206px;
    	margin-left: auto;
        margin-right: auto;
    	background:url(http://placehold.it/300x300);
    }
    
    .topIcon1 {
    	position:relative;
    	width:45px;
        left: 155px;
        top: -10px;
    	display:none;
    border:dotted;
    }

JavaScript

// To make the div clickable
    $('#momClickable').click(function() {
    	  alert('You clicked the DIV.');
    	}); 
    
    //To make the icon clickable
    $('.topIcon1').click(function(event) {
    	  alert('You clicked the icon.');
          event.stopPropagation();
    	}); 	
    
    $(function(){
        $(".pictureBoxWrapper1").hover(function(){
          $(this).find(".topIcon1").fadeIn(100);
          $('#momClickable').css('cursor','pointer');
        }
                        ,function(){
                            $(this).find(".topIcon1").fadeOut();
                        }
                       );        
    });