CSS for Twitter like effect

by Dylan Schadeck

HTML

<section class="parent">
 <p>Section text would go hereSection text would go hereSection text would go hereSection text would go hereSection text would go hereSection text would go hereSection text would go hereSection text would go hereSection text would go hereSection text would go hereSection text would go here</p>
  <div class="child">Share</div>
  <div class="child">Like</div>
  <div class="child">Tweet</div>
</section>

<section class="parent">
 <p>Section text would go here</p>
  <div class="child">Share</div>
  <div class="child">Like</div>
  <div class="child">Tweet</div>
</section>

<section class="parent">
 <p>Section text would go here</p>
  <div class="child">Share</div>
  <div class="child">Like</div>
  <div class="child">Tweet</div>
</section>

CSS

.parent {
    width: 400px;
    padding: 1em 1em 1.5em 1em;
    background: #fff;
    border: 2px solid #000;
    margin: 10px;
    }
.child {
    opacity: 0;
    color: #000;
    margin-left: 10px;
    float: right;
    }
.child:hover {
   opacity: 1.0;
    text-decoration: underline;
    cursor: pointer;
    }
.parent:hover > .child {
    opacity: 1.0;
    }