Hoverover img = show figcaption

section.image { padding-top:100px; } section.image figure.two-forth img { width:50%; } section.image figcaption { opacity:0; } /* figure { position: relative; display: inline-block; } figcaption { display: none; position: absolute; left: 0; bottom: 5px; right: 0; background-color: rgba(0,0,0,.15); } figure:hover img { opacity: .7; } figure:hover figcaption { display: block; } */

by Ken Watanabe

HTML

<div class="pagewrap">
    
    <section class="text">
            <h1 class="title">
                Project Title
            </h1>
            <p class="information">
                Project Text. A hidden class that was swapped with .title.
            </p>
    </section>
    
    <section class="image">
        <figure class="one-forth">
            <img src="http://i58.tinypic.com/rvf574.jpg"/>
            <figcaption>
                ONE
            </figcaption>
        </figure>
    </section>
    
    <section class="image">
        <figure class="two-forth">
            <img src="http://i58.tinypic.com/rvf574.jpg"/>
            <figcaption>
                TWO
            </figcaption>
        </figure>
    </section>
    
    <section class="image">
        <figure class="three-forth">
            <img src="http://i58.tinypic.com/rvf574.jpg"/>
            <figcaption>
                THREE
            </figcaption>
        </figure>
    </section>
        
</div>

CSS

/* General */
html, body { height:100%; width:100%; font-size:100%; color:#212121; }
html, html a, section, p, h1, body, img, figure, figcaption { margin:0; padding:0; }

/* Wrap */
div.pagewrap { width:80%; max-width:960px; margin:0 auto; }

/* Text */
section.text { padding-top:20px; position:fixed; z-index: 1000; }
section.text h1.title { opacity:1; }
section.text p.information { opacity:0; }

/* Image */
section.image { padding-top:25px; }
img { max-width: 100%; vertical-align:bottom; }
section.image figure { position:relative; display:inline-block; }
section.image figure.one-forth { width:25%; }
section.image figure.two-forth { width:50%; }
section.image figure.three-forth { width:75%; }
section.image figcaption { display:none; position:absolute; color:white; top: 50%; text-align: center; transform: translateY(-50%); width: 100%; } 
section.image figure:hover figcaption { display:block; }

/* Typography */
body, h1 { font-family:"HelveticaNeue"; font-size:20px; line-height:24px; letter-spacing:0.06em; font-weight:normal; font-style:normal; }