Below is the HTML content:
<div class="wrapper">
<figure align="center"><img src="http://www.felipegrin.com/port/or-site.jpg" alt=""><br><span>RESPONSIVE HTML5 WEBSITE FOR <br> OR LEDS COMPANY</span></figure>
<figure align="center"><img src="http://www.felipegrin.com/port/or-cat.jpg" alt=""><br><span>PRODUCT CATALOG MADE FOR THE <br> OR LEDS COMPANY</span></figure>
<figure align="center"><img src="http://www.felipegrin.com/port/cci.jpg" alt=""><br><span>WEBSITE FOR ISRAELITE CULTURAL <br> CENTER (CCI)</span></figure><br>
<figure align="center"><img src="http://www.felipegrin.com/port/cartazes.jpg" alt=""><br><span>ADVERTISING POSTERS FOR THE <br> RAV KOOK CULTURAL CENTER</span></figure>
<figure align="center"><img src="http://www.felipegrin.com/port/padronagem.jpg" alt=""><br><span>PATTERNS DESIGNED FOR THE DISCIPLINE <br> "PATTERN DEVELOPMENT"</span></figure>
<figure><img src="http://www.felipegrin.com/port/animacao.jpg" alt=""><br><span>ANIMATION CREATED FOR THE DISCIPLINE <br> "COMPUTER ANIMATION"</span></figure>
</div>
And here is the CSS code:
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.wrapper figure {
cursor: pointer;
position: relative;
overflow: hidden;
}
... (CSS code continues)
As demonstrated <a href="https://jsfiddle.net/5e5dooqp/" rel="nofollow">here</a>, the hover animation appears to work initially on each image, but subsequently may not trigger consistently upon re-hovering. The inconsistent behavior is puzzling and requires further investigation!