CSS Reveal on Hover

Reveal elem when hover on another - pure CSS solution.

by Scott Currell

HTML

<article class="serv1">
  <a><img src="serv1.jpg" alt="large image" width="100%" height="100%"></a>
</article>

<div class="desc1">
  <h3>Service Title1</h3>
  <p>
    lorem ipsem dolor simet cokot se i lL. serveute harrap silo k rwelkiok.
    lorem ipsem dolor simet cokot se i lL. serveute harrap silo k rwelkiok.
    lorem ipsem dolor simet cokot se i lL. serveute harrap silo k rwelkiok.
  </p>
</div>

CSS

article{
  float:left;
  background-color:gray;
}

.serv1{
  width:23%;
  height:250px;
  padding:10px;
}

.desc1{
  width:34%;
  padding-left:8%;
  padding-top:40px;
  padding-right:8%;
  height:500px;
  float:right;
  display:none;
  background-color:#484848;
}

.serv1:hover + .desc1 {
  display:block;
}