Expanding Prev/Next buttons

by meetaaronsilber

HTML

<section class="slideshow">
    <figure>
        <img src="http://placehold.it/500x300" alt="The Test Image" width="500" height="300" />
        <figcaption>Test Image of Your Dreams</figcaption>
    </figure>
    <nav class="slideshow-nav">
        <a href="#" class="prev">Prev</a>
        <a href="#" class="next">Next</a>
    </nav>
</section>

<!-- The idea here is to show an icon for the prev/next buttons initially,
but to reveal the full action description upon hover. -->

CSS

.slideshow { position: relative; width: 500px; }

figure { margin: 0; }

.slideshow-nav a { position: absolute; top: 50%; margin-top: -20px; height: 40px; width: 40px; background: red; font-size: 30px; line-height: 40px; overflow: hidden; text-decoration: none;

-webkit-transition: all 0.1s linear; }
    
.slideshow-nav a:hover { 
    width: 60px;
}

.prev { left: 0; }
.next { right: 0; text-align: right; }