title: CSS3 - trigger transition of a div with a click on a link
body: <p>I am currently working with CSS3 transitions and animations for an university project.</p>
  
  <p>I need to make a <code>div</code> appear (from <code>opacity:0.5</code> to <code>opacity:1</code>) when I click on a link on the page.</p>
  
  <p>I was using the information found in <a href="http://tangledindesign.com/how-to-trigger-css3-transitions-on-click-using-target/" rel="nofollow">this article</a> to reach my goal, but it seems to not work with the <code>&lt;div&gt;</code>.</p>
  
  <p>Here's my code:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.crea_account{
      position:absolute;
      background-color:#0F0;
      border-radius:5%;
      width:600px;
      height:300px;
      top: 250px;
      right: 135px;
      padding: 10px;
      opacity:0.5;
      -webkit-transition: all 1s ease;
  }
  
  :target{
      opacity:1;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="benvenuto"&gt;
          &lt;h1 class="welcome"&gt;&lt;a href="#"&gt;Benvenuto!&lt;/a&gt;&lt;/h1&gt;
          &lt;h2 class="login cool_link"&gt;&lt;a href="#crea_account"&gt;Crea il tuo account&lt;/a&gt;      oppure &lt;a href="#"&gt;Accedi&lt;/a&gt;&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div class="crea_account"&gt;
      Some content
  &lt;/div&gt;
  </code></pre>
  
  <p>Do someone have the link of any tutorial that explain what I want to obtain?
  Thanks!</p>