I found a CSS transition effect from this website. http://www.phillipspart.com/. When you hover your mouse over the magnifying glass on the picture, a block with words on it would come out.
When I tried to find the CSS coding of the element with Chrome, I got something like this:
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
I think there should be a part that’s about “hover,” but I couldn’t find the complete coding for the transition.
After combining the transition coding from several websites, I made a transition effect like this:
(If you copy paste the coding directly from the blog to TextWrangler, the coding won’t work because the quotation marks display wrongly on the blog)
<title> Transition </title>
<link rel=”stylesheet” href=”test.css” type=”text/css”/>
-webkit-transition-property: width ;
-webkit-transition-duration: 300 ms;
transition-duration: 300 ms;
font-family: “Comic Sans MS”, cursive, sans-serif;
What I really want to figure out is how to make the words appear and disappear together with the transition.