title: Have my images ease-in
body: <p>I'm designing a website for this organization which would like their pictures displayed on the side of the page, and main content in the middle. When reaching a new section of the page, the pictures will change to reflect the new content being talked about (so each Div in this case, represents a period in history, being represented on the sides in columns of the page). My problem is that I don't know how to add a photo transition to the picture so it just wont "jump" into place, rather than giving the user a experience of it easing into place onmouseover of the new div (section). Any and all suggestions would be welcomed, and I've tried CSS3 ease-in-out effects, but no luck because I need it to ease in from a black background on hover of the div, and into the picture (and I really dont understand how to create the effect in CSS3 where you would hover over the middle div, but only effect the two side divs). Any help would be appreciated. </p>
  
  <p>Edit: The blue bars on the side represents where the pictures would go, and how the page starts before the user hovers over the center (orange) div. On hover, the blue bars changes as displayed in the second picture. The problem is, aswe all know, the pictures just "jump" into place, rather than ease in(more plesing to the eye). </p>
  
  <p>HTML/JS:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="practice.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id = "first" style = "background-color:blue"&gt;
      &lt;div class = "col-sm-1" id = "left"&gt;
      &lt;/div&gt;
      &lt;div style = "background-color: orange;" class = "col-md-10" onmouseover="changeIn('left','right')" onmouseout="changeOut('left','right')"&gt;
      &lt;/div&gt;
      &lt;div class = "col-sm-1" id = "right"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class = "second"&gt;
      &lt;div class = "col-sm-1"&gt;&lt;/div&gt;
      &lt;div style = "background-color: green;" class = "col-md-10"&gt;&lt;/div&gt;
      &lt;div class = "col-sm-1"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script type="text/javascript"&gt;
  
      function changeIn(spot1,spot2){
          var spot1 = spot1;
          var spot2 = spot2;
          document.getElementById(spot1).style.backgroundImage = "url('1.jpg')"
          document.getElementById(spot2).style.backgroundImage = "url('2.jpg')"
      }
      function changeOut(spot1,spot2){
          document.getElementById(spot1).style.backgroundImage = ""
          document.getElementById(spot2).style.backgroundImage = ""
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>onMouseOut Result (how page starts):
  <img src="https://i.stack.imgur.com/wUW0l.png" alt="onMouseOut Result"></p>
  
  <p>OnMouseOver Result (how page ends):
  <img src="https://i.stack.imgur.com/OSVdQ.png" alt="OnMouseOver Result:"></p>