Join Sue Jenkins for an in-depth discussion in this video Tinting images with CSS for cool hover effects, part of Productivity Tips for Web Designers.
- Hi everyone.…This is Sue Jenkins with…Productivity Tips for Web Designers.…In this week's lesson I'll show you…an awesome way to create unique…and compelling tinted images hover effects with CSS.…Web designers and developers often strive…to engage visitors interactively…in fun and interesting ways.…One quick way to add interactivity with your images…is to play with CSS link states.…There's good news and bad news…when it comes to tinting images with CSS.…The good news is that there's a relatively…new CSS3 selector that can alter…images on a web page using filter effects.…
The not so good news is that currently…only Chrome supports this awesomeness.…But let's take a look at what you can do…with CSS3 filter effects in Chrome…by visiting the CSS filters demo page on appspot.com.…The filter has 10 possible properties.…Blur, grayscale, drop shadow, sepia, brightness,…contrast, hue, invert, saturate, and opacity.…What's great about this demo tool…is it shows you easily how to code each property's value.…
For instance, the sepia, grayscale, invert,…
Author
Sue Jenkins
Updated
7/23/2015Released
7/31/2014Skill Level Intermediate
Duration
Views
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.
-
Introduction
-
Welcome20s
-
-
1. Typography Tips
-
Going big with type5m 32s
-
Pairing fonts for the web6m 59s
-
Styling your web links7m 49s
-
Improving font readability10m 14s
-
2. Illustrator Tips
-
Adding killer shadow effects9m 20s
-
3. Photoshop Tips
-
4. HTML and CSS Tips
-
Using Google font effects4m 39s
-
Dropping in CSS drop caps6m 26s
-
-
5. Dreamweaver Tips
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Tinting images with CSS for cool hover effects