Swap Text: With Bar

by Ken Watanabe

HTML

<!-- <aside class="comment"></aside> -->



<div class="page">

    <div class="text">
        <h1 class="title">Ken Watanabe	&#8195;	&#8195;	&#8195;Info</h1>
        <p class="info">Ken Watanabe is a multidisciplinary designer working in branding, digital, and motion design.
        <br>He currently resides in Portland, Oregon and is a designer at Studio Mega (9.2017—). He was previously a designer at DesignStudio (1.2015–17).
        <br>He has collaborated with teams and organizations including: Twitter, Microsoft, Airbnb, Salesforce, Shyp, Logitech, Chick-fil-A, Herbalife, Turo, Uber, Electronic Arts, and Portland Brewing.</p>
        
    </div>

<br><br><br><br><br><br><br><br><br>A
<br><br><br><br><br><br><br><br><br>A
<br><br><br><br><br><br><br><br><br>A
   <br><br><br><br><br><br><br><br><br>A
<br><br><br><br><br><br><br><br><br>A
<br><br><br><br><br><br><br><br><br>A
<br><br><br><br><br><br><br><br><br>A
<br><br><br><br><br><br><br><br><br>A
<br><br><br><br><br><br><br><br><br>A
</div>

CSS

html,body {
    margin: 0;
    padding: 20px;
    width:100%;
    height:100%;
}

body, h1, p, a {
    font-family: helvetica;
    font-weight: normal;
    text-decoration:none;
    font-size: 18px;
    line-height: 26px;
    margin: 0;
    padding: 0;
}
div.page {
    width:80%;
    max-width:960px;
    margin:0 auto;
    height:100%;
}
div.text {
    width:80%;
    max-width:960px;
    margin:0 auto;
    position:fixed;
}
div.text h1.title {
    -webkit-transition: all .5s; 
    transition: all .5s;
}
div.text:hover h1.title {
    opacity: 0;
    visibility: hidden;
}
div.text p.info {
    width: auto;
    max-width:960px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;  
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .5s; 
    transition: all .5s;
}
div.text:hover p.info {
    opacity: 1;
    visibility: visible;
}
.text{
    position: absolute;
    z-index: 100;
}
/* .image img {
    width: 100%;
    height: auto;
    padding-top: 10px;
} */

/* .image{
    position:relative;
    top:20px;
} */


/* area that should not be active */
/* aside.comment {
    width:70%;
    max-width:960px;
    margin:0 auto;
    height:30px;
    position: fixed;
    left: 20%;
    right: 10%;
    background: rgba(0, 126, 242, 0.5);
    z-index: 100; 
} */

JavaScript

// notes:
// span: inline
// p: block