<div id="wrapper">
  <div class="intro">
    <h1>Comments Concept.</h1>
    <p>I was recently re-doing my blog and when I came to developing the comments I had a really simple, yet awesome idea. Well here is a very similar example:</p>
  </div>
  <div class="comments">
    <div class="initial">
      <img src="http://1.gravatar.com/avatar/d4d75d08a650fe2db8cc1cf8bddef041?s=44&d=retro&r=G" alt="Rob" />
      <span>Rob Salaman</span>
      <span>November 20th 2012</span>
      <p>Oh wow that's so cool! I don't understand why the pig didn't just kick the wolf though!</p>
    </div>
    <div class="reply">
      <img src="http://0.gravatar.com/avatar/?d=retro&s=44" alt="James" />
      <span>James</span>
      <span>November 20th 2012</span>
      <p>Because the wolf has a kick-ass lawyer! :P</p>
    </div>
    <div class="initial">
      <img src="http://0.gravatar.com/avatar/?d=retro&s=44" alt="Bob" />
      <span>Uncle Left</span>
      <span>November 20th 2012</span>
      <p>Yeah I totally agree with this whole thing, but I don't see why the wolf needed to ruin their houses?</p>
    </div>
  </div>
  <div class="outro">
    Original idea from my rls.co blog.
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Share+Tech);
body { background: #eee; font-size: 1.5em; font-family: 'Share Tech'; }

#wrapper { width: 800px; text-align: center; margin: 0 auto; }
#wrapper .intro { text-align: left; width: 100%; float: left; }
#wrapper .intro h1 { color: #555; margin: 50px 0 0 0; }
#wrapper .intro p { color: #777; line-height: 1.7em; position: relative; top: -15px; }

#wrapper .comments { width: 800px; float: left; text-align: left; color: #666; }
#wrapper .comments .initial { width: 750px; float: left; padding: 15px; border: 10px solid #ddd; background: #fff; -moz-box-shadow: 0px 0px 7px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 0px 7px rgba(0,0,0,0.5); box-shadow: 0px 0px 7px rgba(0,0,0,0.5); -moz-transition: 0.3s linear; -webkit-transition: 0.3s linear; }
#wrapper .comments .initial:hover { border: 10px solid rgba(255,127,0,0.5); box-shadow: 0px 0px 9px rgba(255,127,0,0.7); background: #f0f0f0; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); }
#wrapper .comments .initial img { float: left; margin: 0 0; }
#wrapper .comments .initial span { margin: 10px 15px; float: left; }
#wrapper .comments .initial p { width: 100%; float: left; line-height: 1.7em; }

#wrapper .comments .reply { width: 640px; float: left; margin: -30px 10px 25px 100px; padding: 15px; border: 10px solid #ff664a; background: #f7f7f7; -moz-box-shadow: 0px 0px 7px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 0px 7px rgba(0,0,0,0.5); box-shadow: 0px 0px 7px rgba(0,0,0,0.5);  -moz-transition: 0.3s linear; -webkit-transition: 0.3s linear; }
#wrapper .comments .reply:hover { border: 10px solid rgba(255,127,0,0.5); box-shadow: 0px 0px 9px rgba(255,127,0,0.7); background: #ddd; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); }
#wrapper .comments .reply img { float: left; margin: 0 0; }
#wrapper .comments .reply span { margin: 10px 15px; float: left; }
#wrapper .comments .reply p { width: 100%; float: left; line-height: 1.7em; }

#wrapper .outro { width: 100%; float: left; text-align: left; margin: 25px 0 50px 0; padding: 25px 0 0 0; border-top: 3px solid #ff664a; color: #777; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js