angularjs + css - show hover div then click on hover button will show another div

Question

I have an image . . when hover the image I need to show x button (overlay) on hover and then click on the x will lead to new div that cover all the image (with transition) (and below the image ) with new div with 2 buttons ok and close.

the overlay should appear again if I click cancel and if the mouse on the image (because the hover)

I am using angular 1.6 + es6 , mange to do the hover but not the second part . i am trying to achive that with css if possible

my code :

<div class="thumbnail">

      <div ng-if="$ctrl.popupEvent === false" class="overlay">
            <div class="icon">
                <span class="fa fa-close" ng-click="$ctrl.popupEvent = true"></span>
            </div>
       </div>


    <div ng-if="$ctrl.popupEvent === true" class="popup-overlay" style="background: red;">
            <div class="icon-container">
                <span class="fa fa-ok" ng-click="$ctrl.ok();"></span>
                <span class="fa fa-close" ng-click="$ctrl.popupEvent = false;"></span>
            </div>
       </div>

</div>

css

//image area
.thumbnail {

    position: relative;

    &:hover{
        .overlay{
           position: absolute;
          display: none;
          background: #erere;
          height: 100%;
          opacity: 0.9;
           width: 100%;
        }

    }
}

    .overlay {
        position: absolute;
        display: none;
        background: #erere;
        height: 100%;
        opacity: 0.9;
        width: 100%;
    }