title: CSS (or not) animated image it becomes transparent onmouseover and then becomes untransparent again
body: <p>heyo fellows gotta question, i have to make a picture that gets a bit transparent (like opacity 0,4), then it size increases like 2x and becomes untransparent again (opacity 1)
  and the text all that time doesnt change its position.</p>
  
  <pre><code>img  {
           opacity: 1;
           width: 250;
           }
           img:hover {
      opacity: 0.4;
      filter: alpha(opacity=40);
          width: 500px; 
          transition-property: width;  
    transition-duration: 4s;
  
                           }
  </code></pre>
  
  <p>i've made a css code only for size increasing and transparency, however no idea how to make it opacity 1 again after my 4sec animation and no idea how to make the text stay in the very same position after image size increases.</p>