title: image viewer using css is not working
body: <p><img src="https://i.stack.imgur.com/Pwihf.png" alt="enter image description here"></p>
  
  <p>Hello Friends,</p>
  
  <p>I am trying to develop a simple image viewer as you can see in given picture i want when user hover on black box then the red box will appear i got problem on the last div when user hover on last div the red div going outside please help me . Is there any way to solve this using <code>CSS</code> only. Please see my code </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div{float:left; text-align:center; font-size:16px; color:#404040; margin:0 30px 20px 30px; position:relative;
  
      .viewer{
          position:absolute;
          width:300px;
          background:red;
          height:400px;
          top:20px;
          left:110px;
      }
  </code></pre>
  
  <p>Thanks in advance .. :)</p>