WEB DEVELOPMENT DESIGN FOUNDATIONS WITH HTML 5 7

CSS IMAGE GALLERY Configure each thumbnail image: <li><a href="photo 1. jpg"><img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="photo 1 thumb.

CSS IMAGE GALLERY Configure each thumbnail image: <li><a href="photo 1. jpg"><img src="photo 1 thumb. jpg" width="100" height="75" alt="Golden Gate Bridge"> <span><img src="photo 1. jpg" width="400" height="300“ alt="Golden Gate Bridge"> Golden Gate Bridge </span></a> </li> The key CSS: #gallery span { display: none; } #gallery a: hover span { display: block; position: absolute; top: 10 px; left: 300 px; text-align: center; } Copyright © Terry Felke-Morris 2

HANDS-ON PRACTICE 11. 5 Page 472 chapter 11/gallery. html Copyright © Terry Felke-Morris 3

CSS 3 TRANSFORM PROPERTY Allows you to rotate, scale, skew, or move an element Example: -webkit-transform: rotate(3 deg); -moz-transform: rotate(3 deg); -o-transform: rotate(3 deg); -ms-transform: rotate(3 deg); Copyright © Terry Felke-Morris 4

HANDS-ON PRACTICE 11. 6 Page 475 chapter 11/transform/index. html Copyright © Terry Felke-Morris 5

CSS 3 TRANSITION PROPERTY Provides for changes in property values to display in a smoother manner over a specified time. Example: background-color: #cccccc; -webkit-transition: background-color 1 s ease-in; -moz-transition: background-color 1 s ease-in; -o-transition: background-color 1 s ease-in; Copyright © Terry Felke-Morris 6