• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Articles tagged: css3 transitions

css3 transitions

Smooth Fading Image Captions with Pure CSS3

29 September 2010 / 2 Comments

Smooth Fading Image Captions with Pure CSS3

View Demo »

Download Code

CSS3 promises to usher in a new wave of gorgeous web design, with lovely features such as drop shadows, text shadows, rounded corners, gradients, and border images.

One CSS3 feature that is really starting to gain traction now is transitions. CSS transitions allow you to smoothly animate an element’s CSS properties from one state to another, without using a single line of JavaScript.

Most modern browsers now have good support for transitions, including Firefox 4, Safari 5, Mobile Safari and Opera 10. IE sadly doesn’t (and this includes the upcoming IE9). Fortunately, transitions usually degrade gracefully in browsers that don’t support them—instead of elements slowly moving from one state to another, they simply jump instantly between states.

In this tutorial I’ll show you how to use CSS3 transitions to create a nice fading caption effect on images. View it in action — as you hover over an image with the mouse, you’ll see its caption fade in. (Assuming you’re not using IE, of course.)

Naturally, mobile browsers with touchscreens don’t have a concept of hovering. Instead, you can tap an image to see its caption.

Along the way, we’ll also use some new HTML5 elements like figure and figcaption to create nice semantic markup.

Ready? Let’s get started!

[Read more…] about Smooth Fading Image Captions with Pure CSS3

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits