title: CSS Transition and div inside another div behaves crazy
body: <p>I have two problems with my portfolio section which is not as smooth as I want it to be. Here they are:</p>
  
  <ol>
  <li><p>I wanted my projects to change background-color and show a small plus sign when hovering over them. In the same time I wanted to add a "transition: all 0.5s ease-in-out;" but the result is not what I expected. It probbaly happens because my "plus sign" should be located in another div but I didn't know how to make it work. Instead I put it here:</p>
  
  <pre><code>.projectshot a .over:hover{
      position: absolute;
      background: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png) center center no-repeat rgba(51, 51, 51, 0.6);
      border-radius: 8px;
      height: 150px;
      width: 200px;
      margin: 10px;
  }
  </code></pre>
  
  <p>This is the effect I wanted to achieve: <a href="http://bjorsberg.se/" rel="nofollow">http://bjorsberg.se/</a></p></li>
  <li><p>The second problem that bothers me is that, if you look really carefully, when you approach each of the projects with the mouse the mouse pointer starts to "dance" and it behaves crazy??? How can I fix that???</p></li>
  </ol>
  
  <p>Here is my JSFiddle: </p>
  
  <p><a href="http://jsfiddle.net/8fCMA/2/" rel="nofollow">http://jsfiddle.net/8fCMA/2/</a></p>
  
  <pre><code>.plus{
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -49px 0 0 -56px;
      background: url(img/plus.png) center center no-repeat;
  }
  </code></pre>
  
  <p>I am quite new to web design (4 months since I started learning) and I am clearly not good with positioning div's inside div inside another div... So, please feel free to correct my fiddle if you see any trouble I created. Thanks!</p>