Created
May 18, 2012 17:11
-
-
Save rafaelportela/2726470 to your computer and use it in GitHub Desktop.
Using CSS3 transition to increase block width on mouse hover
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 & 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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