title: angularjs + css - show hover div then click on hover button will show another div
body: <p>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.</p>
  
  <p>the overlay should appear again if I click cancel and if the mouse on the image (because the hover)</p>
  
  <p>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  </p>
  
  <p>my code :</p>
  
  <pre><code>&lt;div class="thumbnail"&gt;
  
        &lt;div ng-if="$ctrl.popupEvent === false" class="overlay"&gt;
              &lt;div class="icon"&gt;
                  &lt;span class="fa fa-close" ng-click="$ctrl.popupEvent = true"&gt;&lt;/span&gt;
              &lt;/div&gt;
         &lt;/div&gt;
  
  
      &lt;div ng-if="$ctrl.popupEvent === true" class="popup-overlay" style="background: red;"&gt;
              &lt;div class="icon-container"&gt;
                  &lt;span class="fa fa-ok" ng-click="$ctrl.ok();"&gt;&lt;/span&gt;
                  &lt;span class="fa fa-close" ng-click="$ctrl.popupEvent = false;"&gt;&lt;/span&gt;
              &lt;/div&gt;
         &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>//image area
  .thumbnail {
  
      position: relative;
  
      &amp;: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%;
      }
  </code></pre>