This next method might appease the semantic purists a little more, but it’s essentially the same as the solution above, except this time the tint happens on hover. Finally, I’ve added a transition and hover state on the pseudo-element.ĬSS Image Tint with Pseudo-Element by Louis Lazaris ( CodePen.Īs you can see in the demo, the tint appears on each image by default and if you roll over an image the tint goes away. In this case, I’ve made all values zero, which means they will begin at the four edges of the element. You can actually define the dimensions of an element based on top/bottom/left/right positioning. The trick to getting the pseudo-element (which has the tinted background) to fill the whole image is to use a little-known positioning trick. Although it appears “before” the image in the source order, it appears on top of the image due to it being absolutely positioned. Next I place a pseudo-element inside the wrapper element and position it absolutely. The element is positioned relatively to prepare the context for the pseudo-element. So what’s happening here? Well, first I have a wrapper element (I’m using the figure element but you could use whatever you want, even list items for multiple images). The list of things you can accomplish with pseudo-elements seems endless and they help with a pure CSS example of an image tint. Each of these solutions has the drawback of requiring either an extra wrapper element or JavaScript.
In this post, I’ll offer a few solutions for mimicking a CSS image tint or semi-transparent color overlay. These might include dissolve, darken, multiply, overlay, and saturation.
This particular feature request is more along the lines of matching the behaviour of some, or all, the blending modes available in traditional image editors like Photoshop. My immediate thought was: That should be simple enough, shouldn’t it?īut it’s not so simple.
One of the wish list items a few people mentioned was “CSS blend modes” with a use case of tinting an image on hover (or tinting it statically, then removing the tint on hover or by some other interaction). The other day Paul Irish posted an article that collected together responses to a question that he and Yehuda Katz asked their Twitter followers. Update: (May 7, 2013) There are now two specifications that make this sort of thing possible with CSS: Filters and Compositing and Blending.
0 kommentar(er)
