css hover image - staying put

I have the below two images one is a roll over image which displays another image

/* HOVER IMG */
.hover_img a { position:static; }
.hover_img a span { position:fixed; display:none; z-index:99;}
.hover_img a:hover span { display:block; position: fixed; top: 5px; width:800px; margin-left:140px;}
  <div class="hover_img">
  <a href="link.html"><img src="http://lorempixel.com/101/101" style="border : 0;" width="120" height="30"/><span><img style="border: 5px solid #000000;border-radius: 25px; width:800px" src="http://lorempixel.com/100/100"/></span></a>
  </div>

the problem i have is that when moving off the original image, and moving to the roll over if you move fast enough when the mouse is over the roll over image it then stays and doesnt remove.

As the roll over image is quite large i am looking for a way in which if the mouse is over the roll over image then it doesnt show?

2 answers

  • answered 2018-10-09 16:59 edubz

    I got the hover image to disappear by messing around with the positioning of span image.

    .hover_img 
    a:hover span {   
      display:block; 
      position: fixed; 
      top: 0%; 
      left: -100px;
      width:800px; 
      margin-left:140px;
    }
    

    https://codepen.io/edubz/pen/jeBPKe

  • answered 2018-10-09 17:14 Alireza

    use padding-left instead of margin for 20px and also use left:120px to position your span element.

    /* HOVER IMG */
    .hover_img a { position:static; }
    .hover_img a span { position:fixed; display:none; z-index:99;}
    .hover_img a:hover span { display:block; position: fixed; top: 5px; left:120px width:800px; padding-left:20px;}
      <div class="hover_img">
      <a href="link.html"><img src="http://lorempixel.com/101/101" style="border : 0;" width="120" height="30"/><span><img style="border: 5px solid #000000;border-radius: 25px; width:800px" src="http://lorempixel.com/100/100"/></span></a>
      </div>