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...

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. Enjoy!

Adding an Overlay to your Graphics with CSS

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.

Learn More


Adding an Animated Scroll Effect to your Images

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.

Learn More


Adding Magnific Popup to your Photo Gallery

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.

Learn More


Adding a Tilt Effect to your Images onHover with CSS

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.

Learn More


A Star Wars Parallax with Multiple Backgrounds

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.

Learn More


Author

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.