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!
Adding an Overlay to your Graphics with CSS
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.
Adding an Animated Scroll Effect to your Images
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.
Adding Magnific Popup to your Photo Gallery
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.
Adding a Tilt Effect to your Images onHover with CSS
Adding interactivity to your website is always a value add. Static images are boring yet for some reason they're still everywhere on the web. Good design principles include adding as much interactivity to your images as possible so they stand out. There are many ways to do this using different hover effects with JavaScript. However, in this article, we will show you how to add a tilt effect to your images on Hover using CSS.
A Star Wars Parallax with Multiple Backgrounds
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.
Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter
