title: making divs that are shown while hovering over an image invisible even while running over them with the cursor
body: <p>I'm pretty new to coding, maybe you can help me. 
  The situation: I'm trying to unfold divs with css while hovering over an image. These divs will appear on the left or right side of the image and contain some backgroundinformations about it. 
  You can find <a href="https://stackoverflow.com/questions/37900830/make-a-div-fold-out-to-show-content">here</a> the code I used as a base.</p>
  
  <p>Everthing is working so far but when I run over the unfolded div and "unhover" the image, the div will be visible as long as I stay on the div with the cursor. I want it to be invisible as soon as I "unhover" the image, even if I run over the place where the div used to be. I can't imagine how to solve the problem with my knowlegde about css. Since English is not my mother tongue maybe i've overlooked something. I would prefer solutions using only css (if it's possible). </p>
  
  <p><a href="https://jsfiddle.net/Mica_S/mc2tpdrf/4/" rel="nofollow noreferrer">Here</a> You can find the jsfiddle version of the code.</p>
  
  <pre><code>&lt;body&gt;
  &lt;section id="imagegrid"&gt;
  &lt;div class="wrapper"&gt;
    &lt;img src="  https://s3.postimg.org/qdqkkehvj/rot.png" /&gt;
    &lt;div class="background-info-rechts"&gt;
      &lt;div class="text"&gt;1&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wrapper"&gt;
    &lt;img src="https://s3.postimg.org/4da83rz7j/orange.png" /&gt;
    &lt;div class="background-info-links"&gt;
      &lt;div class="text"&gt;2&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wrapper"&gt;
    &lt;img src=" https://s3.postimg.org/fblhlynsv/gr_n.png" /&gt;
    &lt;div class="background-info-rechts"&gt;
      &lt;div class="text"&gt;3&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wrapper"&gt;
    &lt;img src="https://s3.postimg.org/fzuc4wmin/blau.png" /&gt;
    &lt;div class="background-info-links"&gt;
      &lt;div class="text"&gt;4&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>/*______________GRID______________*/
  
  #imagegrid {
  padding: 0;
  list-style: none;
  position: relative;
  width: auto;
  }
  
  .wrapper {
  position: relative;
  float: left;
  width: 25%;
  width: -webkit-calc(100% / 4);
  width: calc(100% / 4);
  height: auto;
  }
  
  img {
  max-width: 100%;
  max-height: auto;
  }
  
  
  /*_________________FOLDOUT EFFECT________________*/
  
  .background-info-rechts {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0.2;
  transform-origin: 0% 50% 0px;
  transform: rotateY(-90deg);
  background-color: pink;
  }
  
  .background-info-links {
  position: absolute;
  right: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0.2;
  transform-origin: 0% 50% 0px;
  transform: rotateY(-90deg);
  background-color: pink;
  }
  
  .background-info-rechts .text,
  .background-info-links .text {
  padding: 0px;
  }
  
  .wrapper:hover .graytocolor {
  visibility: visible;
  }
  
  .wrapper:hover .background-info-rechts,
  .wrapper:hover .background-info-links {
  transform: translate3d(0px, 0px, 0px) rotateY(0deg);
  transition: opacity 1s cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,-moz-transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
  visibility: visible;
  opacity: 1;
  z-index: 1;
  }
  </code></pre>