Example: CSS transitions

_edited.css

.news-post {
  margin-top: 6px;
  padding: 5px 0 5px 10px;
  width: 285px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px; 
  -webkit-transition: width 0.2s linear, background 0.3s ease-in-out;
  -moz-transition: width 0.2s linear, background 0.3s ease-in-out;
  transition: width 0.2s linear, background 0.3s ease-in-out;
}

.news-post:hover {
  width: 300px;
  background-color: rgba(208, 208, 198, 0.5);
}

index.html

<div id="wrap">
  <div id="blocks">
    <section id="news" class="box">
      <header><h1 class="script">Latest News</h1></header>
      <article class="news-post">
        <header>
          <h1><a href="#">Border &amp; Radius Named to City's Best List</a></h1>
        </header>	
        <p><time datetime="2011-01-26" pubdate>Monday, January 26, 2011</time> | <span class="via">via</span> <a href="#">The Newspaper</a></p>
      </article>
      <article class="news-post">
        <header>
          <h1><a href="#">Another Newsworthy Item Goes Here</a></h1>
        </header>	
        <p><time datetime="2011-01-26" pubdate>Monday, January 26, 2011</time> | <span class="via">via</span> <a href="#">The Newspaper</a></p>
      </article>
      <article class="news-post">
        <header>
        <h1><a href="#">Hey Look, We're In The News Again</a></h1>
        </header>	
        <p><time datetime="2011-01-26" pubdate>Monday, January 26, 2011</time> | <span class="via">via</span> <a href="#">The Newspaper</a></p>
      </article>
      <article class="news-post">
        <header>
          <h1><a href="#">I'll Have a Pint of Guinness Please</a></h1>
        </header>	
        <p><time datetime="2011-01-26" pubdate>Monday, January 26, 2011</time> | <span class="via">via</span> <a href="#">The Newspaper</a></p>
      </article>		
    </section>
  </div>
</div>

style.css

@font-face {
  font-family: 'DroidSansRegular';
  src: url('fonts/DroidSans-webfont.eot');
  src: local('☺'), url('fonts/DroidSans-webfont.woff') format('woff'), url('fonts/DroidSans-webfont.ttf') format('truetype'), url('fonts/DroidSans-webfont.svg#webfontw7zqO19G') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'DroidSansBold';
  src: url('fonts/DroidSans-Bold-webfont.eot');
  src: local('☺'), url('fonts/DroidSans-Bold-webfont.woff') format('woff'), url('fonts/DroidSans-Bold-webfont.ttf') format('truetype'), url('fonts/DroidSans-Bold-webfont.svg#webfontSOhoM6aS') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'LeagueGothicRegular';
  src: url('fonts/League_Gothic-webfont.eot');
  src: local('☺'), url('fonts/League_Gothic-webfont.woff') format('woff'), url('fonts/League_Gothic-webfont.ttf') format('truetype'), url('fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'MarketingScriptRegular';
  src: url('fonts/MarketingScript-webfont.eot');
  src: local('☺'), url('fonts/MarketingScript-webfont.woff') format('woff'), url('fonts/MarketingScript-webfont.ttf') format('truetype'), url('fonts/MarketingScript-webfont.svg#webfontZ5AiaAsu') format('svg');
  font-weight: normal;
  font-style: normal;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal; }
ol,ul { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; }
q:before,q:after { content: ''; }
abbr,acronym { border: 0; }
a { outline: none; text-decoration: none; }
a img { border: none; }
.clear { clear: both; font-size: 1px; line-height: 1px; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.texthide { text-indent: -9999em; }
body {
  background: url(bg.png) repeat;
}
#wrap {
  margin: 0 auto;
  width: 960px;
  padding: 0;
}
#blocks {
  float: left;
  margin-top: 20px;
}
#blocks section {
  float: left;
  width: 290px;
  height: 230px;
  display: inline;
  background: #fafaf6;
  border: 5px solid #e9e9e4;
  margin-right: 30px;
}
#blocks section:last-child {
  margin-right: 0;
}
.box h1.script {
  font: normal 24px "MarketingScriptRegular", Georgia, serif;
  color: #717165;
  margin-left: 10px;
  padding: 5px 0 0 0;
  border-bottom: 1px solid #ecece9;
  width: 270px;
  text-align: left;
}
.news-post h1 a {
  font: bold 12px "DroidSansBold", Verdana, sans-serif;
  color: #717165;
  text-transform: uppercase;
}
#news p {
  font: normal 9px "DroidSansBold", Verdana, sans-serif;
  color: #98988c;
  text-transform: uppercase;
}
#news p a {
  color: #98988c;
  text-decoration: underline;
}
#news p a:hover {
  text-decoration: none;
}
#news p span.via {
  text-transform: none;
}
.news-post:hover {
  background: #d0d0c6;
}