Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="news">
  <div class="content">
    <h3>British Ipsum crumpets lorem cheerio!</h3>
    <p>ipsum mate cheers mate ipsum mate cheers mate good day good day cup of tea toodle pip crumpets toodle pip jolly good show jolly good show cheerio! jolly good show going to the loo harry potter cheers fish and chips bloody hell fish and chips harry potter bloody hell hello chaps rule britannia bollocks bloody hell fish and chips cheerio! off to the pub bloody hell arse bollocks knackered ron weasley tosser mate toodle pip knackered God save the queen arse rule britannia going to the loo bangers and mash fish and chips ron weasley</p>

    <p>British Ipsum hello chaps lorem bollocks ipsum off to the pub cheers mate toodle pip mate cup of tea good day good day cup of tea bangers and mash crumpets God save the queen jolly good show mate cheerio! fish and chips going to the loo cheers cheers jolly good show bloody hell toodle pip harry potter crumpets hello chaps cheers mate bollocks ron weasley fish and chips knackered off to the pub going to the loo arse jolly good show knackered mate tosser bangers and mash toodle pip bloody hell God save the queen toodle pip rule britannia rule britannia bangers and mash cheerio! ron weasley</p>

    <p>British Ipsum rule britannia lorem tosser ipsum good day cheers mate knackered mate arse good day off to the pub cup of tea fish and chips crumpets bangers and mash jolly good show cheers mate cheerio! mate going to the loo fish and chips cheers cup of tea bloody hell mate harry potter bangers and mash hello chaps toodle pip bollocks bollocks fish and chips arse off to the pub ipsum arse arse knackered tosser tosser God save the queen toodle pip bollocks God save the queen off to the pub rule britannia mate bangers and mash jolly good show ron weasley</p>
  </div>
</div>

<div class="news">
  <div class="content">
    <h3>British Ipsum crumpets lorem cheerio!</h3>
    <p>ipsum mate cheers mate ipsum mate cheers mate good day good day cup of tea toodle pip crumpets toodle pip jolly good show jolly good show cheerio! jolly good show going to the loo harry potter cheers fish and chips bloody hell fish and chips harry potter bloody hell hello chaps rule britannia bollocks bloody hell fish and chips cheerio! off to the pub bloody hell arse bollocks knackered ron weasley tosser mate toodle pip knackered God save the queen arse rule britannia going to the loo bangers and mash fish and chips ron weasley</p>

    <p>British Ipsum hello chaps lorem bollocks ipsum off to the pub cheers mate toodle pip mate cup of tea good day good day cup of tea bangers and mash crumpets God save the queen jolly good show mate cheerio! fish and chips going to the loo cheers cheers jolly good show bloody hell toodle pip harry potter crumpets hello chaps cheers mate bollocks ron weasley fish and chips knackered off to the pub going to the loo arse jolly good show knackered mate tosser bangers and mash toodle pip bloody hell God save the queen toodle pip rule britannia rule britannia bangers and mash cheerio! ron weasley</p>

    <p>British Ipsum rule britannia lorem tosser ipsum good day cheers mate knackered mate arse good day off to the pub cup of tea fish and chips crumpets bangers and mash jolly good show cheers mate cheerio! mate going to the loo fish and chips cheers cup of tea bloody hell mate harry potter bangers and mash hello chaps toodle pip bollocks bollocks fish and chips arse off to the pub ipsum arse arse knackered tosser tosser God save the queen toodle pip bollocks God save the queen off to the pub rule britannia mate bangers and mash jolly good show ron weasley</p>
  </div>
</div>

<div class="news">
  <div class="content">
    <h3>British Ipsum crumpets lorem cheerio!</h3>
    <p>ipsum mate cheers mate ipsum mate cheers mate good day good day cup of tea toodle pip crumpets toodle pip jolly good show jolly good show cheerio! jolly good show going to the loo harry potter cheers fish and chips bloody hell fish and chips harry potter bloody hell hello chaps rule britannia bollocks bloody hell fish and chips cheerio! off to the pub bloody hell arse bollocks knackered ron weasley tosser mate toodle pip knackered God save the queen arse rule britannia going to the loo bangers and mash fish and chips ron weasley</p>

    <p>British Ipsum hello chaps lorem bollocks ipsum off to the pub cheers mate toodle pip mate cup of tea good day good day cup of tea bangers and mash crumpets God save the queen jolly good show mate cheerio! fish and chips going to the loo cheers cheers jolly good show bloody hell toodle pip harry potter crumpets hello chaps cheers mate bollocks ron weasley fish and chips knackered off to the pub going to the loo arse jolly good show knackered mate tosser bangers and mash toodle pip bloody hell God save the queen toodle pip rule britannia rule britannia bangers and mash cheerio! ron weasley</p>

    <p>British Ipsum rule britannia lorem tosser ipsum good day cheers mate knackered mate arse good day off to the pub cup of tea fish and chips crumpets bangers and mash jolly good show cheers mate cheerio! mate going to the loo fish and chips cheers cup of tea bloody hell mate harry potter bangers and mash hello chaps toodle pip bollocks bollocks fish and chips arse off to the pub ipsum arse arse knackered tosser tosser God save the queen toodle pip bollocks God save the queen off to the pub rule britannia mate bangers and mash jolly good show ron weasley</p>
  </div>
</div>
              
            
!

CSS

              
                .news .content{
  float: left;
  height: 100px;
  width: 31%;
  overflow-y: auto;
  padding: 0 1%;
}
              
            
!

JS

              
                $('.news').each(function(){
  var t,
      $self = $(this),
      $contentBox = $self.find('.content'),
      newHeight = $contentBox.innerHeight()*3
  
  $self.hover(function(){
      clearTimeout(t);
      $contentBox.stop().animate({
      'height' : newHeight
    }, {
      step: function() {
        $contentBox.css("overflow-y", "auto");
      }
    });
  }, function(){
    clearTimeout(t);
    t=setTimeout(function(){
      $contentBox.stop().animate({
        'height' : 100
      }, {
        step: function() {
          $contentBox.css("overflow-y", "auto");
        }
      });
    }, 300)
  });
 });
              
            
!
999px

Console