Skip to content

Instantly share code, notes, and snippets.

@rafaelportela
Created May 18, 2012 17:11
Show Gist options
  • Save rafaelportela/2726470 to your computer and use it in GitHub Desktop.
Save rafaelportela/2726470 to your computer and use it in GitHub Desktop.
Using CSS3 transition to increase block width on mouse hover
<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>
.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 .2s linear, background .3s ease-in-out;;
-moz-transition: width .2s linear, background .3s ease-in-out;;
transition: width .2s linear, background .3s ease-in-out;
}
.news-post:hover {
width: 300px;
background: rgba(208, 208, 198, .5);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment