<div class="container">
  <div class="note">
    The following demo shows an inline image in a paragraph of text. If you hover over the image, it will be hidden using the <code>visibility</code> property. Its position in the flow is preserved.
  </div>
  <p>Lorem ipsum dolor sit amet, <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/display/smiley.jpg" alt="Smiley Image"> consectetur adipisicing elit. Delectus, ducimus, quis, ea, earum vitae cum voluptatum facilis laborum id necessitatibus autem quasi iste quia veniam dolore. Iusto, vel consectetur quidem.</p>

  <hr>

  <div class="note">
    This example shows a hidden element and its descendants. Setting <code>visibility: visible;</code> on the children will make them visible, even if their parent is invisible. The hover event of the hidden element is fired when u hover over its visible child.
  </div>
  <div class="element">
    I am hidden. I become visible when hovered. The hidden parts of me won't fire the hover event, but hovering over my child here will do it (because my child is a part of me).
    <div class="child">
      I am a descendant of a hidden element. You can make me visible by setting <code>visibility: visible</code> on me.
      <p>
        If you hover over me, the hover event of my parent will be fired and you will be able to see it.
      </p>
    </div>
  </div>
</div>
body {
  color: #222;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.note {
  color: #888;
  font-style: italic;
}

hr {
  margin: 50px 0;
}

.element {
  padding: 20px;
  background-color: #0099cc;
  color: white;
  margin: 30px 0;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
  visibility: hidden;
}

.element:hover {
  visibility: visible;
}

.child {
  background-color: skyblue;
  color: #222;
  padding: 15px;
  margin: 20px;
  visibility: visible;
}

p img {
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}

p img:hover {
  visibility: hidden;
}