Monstersandsprites.com

Circular icon with two abstract cats

Monstersandsprites

 

 

Programmer Niels Uiterwijk asked me to style and create a theme for his WordPress blog. The design had to be clean, responsive and colorful. I ended up with Google's Material Design approach and implemented Material Design for the first time in a project.

One of the features of this site is the image overlay that happens on hover in the Portfolio section. One images slides on top of the other when you hover on the initial image.

 

 

You can see the setup below:

 

.blog-post-square-visible-image
{
display: block;
}

.blog-post-square-hidden-image
{
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 350px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

.blog-post-image-wrapper:hover > .blog-post-square-hidden-image
{
top: 0px;
}

 

To see more of this project, click here to view the repository on Github!