Veerle Pieters

WORKS

Finished Designs

To view Pieter's full set of portfolio work, visit duoh.com/portfolio.

Hover-Button Code

Wondering how to do these hover buttons? "a.image_text" represents link text, "work1," "work2" etc. is the class of each button, and ":hover" is the command. Once the mouse "hovers" over the button, the text entered in the HTML shows up on the screen.

a.image_text { opacity:0; background:#FFFFFF; width:220px; height:220px; } .work1:hover a.image_text, .work2:hover a.image_text, .work3:hover a.image_text, .work4:hover a.image_text, .work5:hover a.image_text, .work6:hover a.image_text { opacity:0.5; color:#2F292E; text-decoration:none; font-size:40px; font-family:"Coolvetica", sans-serif; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; justify-content: center; }

Fab
{back to top}

Veerle Pieters

WORKS

Finished Designs

To view Pieter's full set of portfolio work, visit duoh.com/portfolio.

Hover-Button Code

Wondering how to do these hover buttons? "a.image_text" represents link text, "work1," "work2" etc. is the class of each button, and ":hover" is the command. Once the mouse "hovers" over the button, the text entered in the HTML shows up on the screen.

a.image_text { opacity:0; background:#FFFFFF; width:220px; height:220px; } .work1:hover a.image_text, .work2:hover a.image_text, .work3:hover a.image_text, .work4:hover a.image_text, .work5:hover a.image_text, .work6:hover a.image_text { opacity:0.5; color:#2F292E; text-decoration:none; font-size:40px; font-family:"Coolvetica", sans-serif; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; justify-content: center; }

Fab
{back to top}