CodePen

HTML

            
              <div class="user">
    <a href="http://twitter.com/jennlukas">
        <div class="user-info">
            <div class="bio-reveal">
               <h2>@jennlukas</h2>
                <p>Front-end consultant and dev, Girl Develop It teacher, .net Mag writer, http://thenerdary.net  , http://ladiesintech.com  , http://fuckyeahhovers.tumblr.com</p>
            </div>
        </div>
    </a>
</div>
            
          
!

CSS

            
              body {
    margin: 10px;
}

.user {
    position: relative;
    width: 240px;
    height: 240px;
    border: 5px solid #000;
}

a {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent url(https://twimg0-a.akamaihd.net/profile_images/2955412142/687b8b741be37ec371c884fc5bf565bd.png) no-repeat;
    text-decoration: none;
}

.user-info {
    position: absolute;
    bottom: 0;
}

h2 {
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 8px;
}

.bio-reveal {
    overflow: hidden;
    max-height: 0;
    background: rgba(183, 191, 185, 0.95);
    transition: all 0.7s linear;
}

p {
    color: #333;
    padding: 8px;
}

a:hover .bio-reveal, a:focus .bio-reveal {
    max-height: 240px; 
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................