Caption Hover Effects - Demo 7
Previous Demo Back to the Codrops Article
24 CSS3 Tutorials for Advanced User Interface Effects
Web developers are becoming crafty as web browsers are updating to more popular standards. This can only lead to better support along with an easier frontend development time. One of the best methods for studying new techniques is by practicing with online tutorials. I want to present a series of 24 well-explained tutorials for more advanced interfaces. These mostly focus around CSS3 effects and more obscure properties within the CSS library. Interactive SVG Infographic Animated 3-D Bar Chart CSS3 Clip Property Annotation Overlay Effect Animated Content Tabs Enhance Required Form Fields using CSS3 Animated Tooltips CSS3 Responsive Timeline Filter Functionality with CSS3 CSS3 Bounce Effect Multiple Column Layouts Understanding the CSS3 calc() Function Custom Checkboxes and Radio Buttons Cool Image Caption Techniques CSS3 :First-Of-Type Selector Breadcrumb Navigation Responsive Form with HTML5/CSS3 CSS3 Linear Gradients CSS3 Repeating Gradients Paragraph Dropcaps Scalable Vector Graphics with CSS3
3 cool CSS3 image hover effects
On the modern web there are numerous techniques that can be used to create interesting interactions, but the simplest and most elegant is usually CSS, and specifically the additions that came with CSS3. Back in the old days, we had to rely on JavaScript for this kind of effect, but thanks to ever-increasing support for CSS3 across browsers, it’s now possible to set up effects like these without any scripting at all. There are sadly still browsers (IE9 and below) that don’t support CSS3, so you’ll either need a fallback for legacy browsers or to treat the effect as a progressive enhancement. Today, we’re going to look at how we can apply cool, but neat hover effects to show and hide images captions. If you’d prefer to follow along with the code, you can download the files here. Demo 1 The first demo is our simplest: the image will fly to its right to reveal the caption. The markup For our first demo’s HTML we will use an unordered list and then wrap the caption and the image inside it. The CSS
6 Cool Image Captions with CSS3
CSS3 is really powerful. It used to be that we need images or a bunch of JavaScript codelines to make a simple transition effect. Nowadays we can do the same with only CSS3. In this tutorial, we will show you how to create image captions with various transitions simply using CSS3. Browser Support This caption will be much dependent on transform and transition properties which are relatively new features, so, it would be wise to take note of the browser support needed to run the caption smoothly. The following are browsers that already support transform and transition: Internet Explorer 10+ (not released yet)Firefox 6+Chrome 13+Safari 3.2+Opera 11+ Now, let’s start the tutorial. HTML Structure We have 6 images; each image with a different caption style. Basic CSS Before styling any element, it is always a good start to reset all the properties using this CSS reset and give them their default style values, so all browsers will render the same result (except maybe, IE6). Image Box Style Caption 1
Simple CSS3 Transitions, Transforms, & Animations Compilation
Get SourceView Demo Introduction To CSS3 CSS3 allows us to do some amazing things, and there’s a common set of properties and functionality at our disposal that enable us to improve user interaction easily. Getting Started Each section will contain a link, and each link will be targeted by a class name. <section><a href="#" class="cmn-t-colour">Colour</a></section><section><a href="#" class="cmn-t-bg">Background</a></section><section><a href="#" class="cmn-t-border-radius">Border Radius</a></section><section><a href="#" class="cmn-t-scale">Scale Up</a></section><section><a href="#" class="cmn-t-translate-bshadow">Translate & Box Shadow</a></section><section><a href="#" class="cmn-t-border">Inner Border</a></section><section><a href="#" class="cmn-t-shake">Lateral Shake</a></section><section><a href="#" class="cmn-t-pulse">Constant Pulse</a></section><section><a href="#" class="cmn-t-underline">Underline Me! #1) Colour #2) Background #3) Border Radius #4) Scale Up #5) Translate & Box Shadow
Animista
Hover.css - A collection of CSS3 powered hover effects
All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the Ian Lunn Design Limited Store and purchase a commercial license. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial Commercial License Purchase | Read full license Extended Commercial License Purchase | Read full license
