Я хочу навести текст с изображением

Question

Я нашел здесь какой-то фрагмент кода и немного его изменил для своих нужд.

Я хочу создать список элементов, и когда вы наводите курсор на каждую строку, я хочу показать изображение справа, нобез скольжения текста вверх / вниз относительно показанных изображений.

Пока это мой код:

https://jsfiddle.net/nikolaf/p65vwbeL/6/

.papers {
}

.hoverinfo {
  cursor: pointer;
}

.hoverinfo .eachpaper {
  display: none;
  color: #000000;
}

.hoverinfo:hover .eachpaper {
  margin-left:115px;
  display: block;
}

<div class="papers">

<div class="hoverinfo"> my image 1
    <div class="eachpaper"><img src="https://yogifil.la/175/200" /></div>
</div>


<div class="hoverinfo"> my image 2
    <div class="eachpaper"><img src="https://yogifil.la/190/234" /></div>
</div>

</div>

Заранее спасибо

Answer 1

Вы также можете попробовать это:

    .hoverinfo {
       cursor: pointer;
       position:relative;
     }

     .hoverinfo .eachpaper {
        opacity:0;
        color: #000000;
        position:absolute;
        top:0;
        left:100px;
        transition:0.3s ease-in-out;
     }

     .hoverinfo:hover .eachpaper {
      opacity:1;
     }

непрозрачность также добавляет плавный переход, что всегда приятно!

Answer 2

Скрипка, которую вы дали, выглядит немного привередливой. Возможно, вам лучше создать список, используя ul / li слева и используя: hover для отображения изображений справа. Просто предложение!

Посмотрите на это:

ul li {
  list-style-type: none;
  vertical-align: top;
  min-width: 250px
}

.pix li.image span {
  margin-left: 0px;
}

.pix li img.image {
  display: none;
  margin-left: 150px;
  top: 20px;
  position: absolute;
}

li:hover img.image {
  vertical-align: top;
  display: inline-block;
}

<ul class="pix">
  <li><span>image1</span><img class="image" src="https://yogifil.la/175/200"></li>
  <li><span>image2</span><img class="image" src="https://yogifil.la/190/234"></li>
  <li><span>image3></span><img class="image" src="your source"></li>
</ul>

Answer 3

Попробуйте эту скрипку. Только для того, чтобы решить эту проблему, нужно использовать свойства положения.

.papers {
}

.hoverinfo {
  position:relative;
  cursor: pointer;
}

.hoverinfo .eachpaper {
  position:absolute;
  display: none;
  color: #000000;
}

.hoverinfo:hover .eachpaper {
  margin-left:115px;
  display: block;
}

<div class="papers">

<div class="hoverinfo"> my image 1
    <div class="eachpaper"><img src="https://yogifil.la/175/200" /></div>
</div>


<div class="hoverinfo"> my image 2
    <div class="eachpaper"><img src="https://yogifil.la/190/234" /></div>
</div>

</div>
  

https://jsfiddle.net/Sampath_Madhuranga/p65vwbeL/16/

Спасибо.