<!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <title>CSS Transition</title>
   <style>
     .child{ display: none; }
     .parent:hover > .child{ display: block; }
   </style>
 </head>
 <body>
  <div class="parent">
   <div class="child">Content</div>
  </div>
 </body>
</html>

I have created a simple layout above that shows the concept of what I am trying to achieve. What I want to do now is to make a CSS3 transition that will allow the child to ease in when the parent is hovered. However, I do not know where to place the transition code so it will work.

html css transition
Edit
Report