Zooming Background Images
A nice walk-through on how to achieve that popular image zoom effect with CSS. Note, read to the end (and the comments) for notes about mobile usage/support.
Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.
A nice walk-through on how to achieve that popular image zoom effect with CSS. Note, read to the end (and the comments) for notes about mobile usage/support.
I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the team how to decrease the file size on the SVGs while preserving the appearance and functionality, finally getting the load time to under 2 seconds. The bounce rate dropped dramatically and conversion was restored.
Some handy tips on optimising SVGs for performance. I’ve been trusting Inkscape for my SVG production needs, but after reading this, I might take a closer look at the files it creates.
Consider a situation where you have to have high-contrast, blurred or brighter versions of particular images on your website. Prior to CSS filters, your only options were either to upload different versions of these images or manipulate the images with JavaScript.
Unless you want to manipulate the pixels in the original image, CSS filters provide an easy way out. Let’s begin this tutorial with a brief discussion of all available filters.
A nice guide to using CSS filters on images. See demo for testing browser compatibility.
Full featured javascript lightbox gallery, No dependencies.
I’ve not seen a new lightbox for a while, this one looks nice.
placeskull is a simple placeholder graphics service. It returns scalable vector graphics of random skulls in dimension and color as defined in the url. placeskull was inspired by popular placeholder graphic services such as placekitten.com and placehold.it.
I came across this placeholder service today, as previously mentioned, I’m a sucker for a skull ‘n’ crossbones.
A nifty little tool for finding the visual centre of an image.
Get placeholder images for your design or development project. Just include the dimensions of the image you need, and we guarantee you’ll have a shitty time.
Haha, I normally use {placekitten}, but PlacePoop looks like more fun.
Impalette scans your image for nearest, matching Pantone colors and maps the 10 most common to a palette and secondary, tertiary, and opposite colors for the palette based on your parameters.
A nifty tool for creating colour palettes.
Turntable.js is a responsive JQuery slider that will let you rotate through a list of images as your mouse (or finger) sweeps across a container. Think of it like a flipbook made with Javascript, instead of paper. All you need is a set of images, and jQuery.
I like this, it’s simple, but effective.
This is an edge case: I’m working on a WooCommerce project where I’m importing tens of thousands of product images from a supplier. The problem is, all the images have a 1 pixel black border and they look terrible when they’re displayed on the site. I have no idea why the supplier thought this was a good idea, but there you go.
To workaround the issue, I decided to attempt to hide the image border using the CSS3 box-shadow property. First, I wrapped the img element inside a div element. I then applied an inset box-shadow property to the div element, before adjusting the z-index of the img element to make it sit below the div. See the demo below.
See the Pen Hiding an Image’s Pixel Border with CSS by Philip Newborough (@corenominal) on CodePen.