Previously I wrote twotutorials on how to style the image element with CSS3 inset box-shadow and border-radius. The trick is to wrap the image with a span tag and apply the image as background-image. However, I recently ran into a problem with that trick while designing the PhotoTouch theme. The issue is that the background-image is not resizable and thus it is not a good idea to use in responsive design. Fortunately, I found a workaround to resolve this. So today I’m going to revisit this topic again.
As I posted before, you can work around by applying the actual image as background-image.
Problem With Background-Image
Now the problem with using the background-image trick is that the image can not be resized dynamically. So it is not a good idea to use with responsive design where the images have to be resizable. This was an actual problem I encountered while designing the PhotoTouch theme for Themify.
Then later I found another workaround using a similar trick. Instead of applying the image as background-image, I found that I can achieve the same result by applying the CSS3 effects on the overlaying image wrap :after pseudo element. The best thing about this trick is the image remained intact and resizable.
Again, jQuery is used to add a dynamic wrap to the target images. The jQuery function below looks for all images in the #demo container and wraps it with a span tag.
The CSS trick is very simple. The overlaying effects are applied to the .image-wrap:after pseudo element. Border-radius (rounded corners) is applied on both the image and image-wrap:after element to match the style.
Various styles such as embossed, cutout / pressed, and glossy effect can be achieved using multiple inset box-shadows. You can also use the :before element to another layer of effect such as glossy gradient. See the demo source code for CSS details. Resize your browser window to see the resizable images.