This recipe creates a class style box that can be reused repeatedly on a page that displays a CSS3 effect and a CSS3 transform when hovered over. As such, it is an easily adaptable recipe—you can use the information in this chapter to substitute different effects and transforms that we'll use in the recipe.
In our particular scenario, we'll apply rounded corners and enlarge the box slightly when it is hovered over.
Here's what you need to have in place before diving into this recipe: you need to have a Dreamweaver site defined. Jump back to Chapter 1, Creating Sites and Pages with Dreamweaver CS6, and review the discussion and steps there for creating a Dreamweaver site.
With your site defined, you're ready! Everything we need is right here in Dreamweaver CS6. Let's first set up the files we need:
Navigate to File | New to open the New Document dialog. Choose Blank Page in the Category column, HTML in the Page Type...