Treating your Images with Style
This post is a mashup of the most popular web design posts related to enhancing the visual aesthetics of your website...
This post is a mashup of the most popular web design posts related to enhancing the visual aesthetics of your website. Enjoy!
Image overlays are a great way to get the most out of the space on a web page. While one static graphic is better than none, adding an overlay provides more context to the content you'll find after clicking the image. By simply hovering over the image, you gain a further glimpse into why you should click on that particular image. In this article, Solodev shows you how to add a title overlay effect to your graphics which is triggered when hovering over any of the images in the grid.
Animated images are more engaging to site visitors than static images. In this tutorial, Solodev will show you how to add an animated scroll effect to your website's images using animate.css and the viewport checker jQuery plugin. This will animate your images to display their full resolution as you scroll, providing an interactive user experience (UX). This tutorial provides a simple implementation of a web page with this animated effect you can make your own.
Graphics have taken on an increasingly central role to online content and the need for interactive and beautifully designed photo galleries has never been more prevalent. In this article we will show you how to add magnific popup by Dmitry Semenov to your photo gallery turning your photos into clickable and expandable elements with further detail.
Parallax makes scrolling through your website seamless by creating a depth and transition effect when scrolling down, thus enhancing the user experience (UX). Although parallax is a definite value-add when implemented appropriately, it's important not to use it too much as it deflates the effect the more it is used on your website.