Блог

Главная - Вопросы по программированию - Установите интервал наведения миниатюр в положении увеличенного изображения

Установите интервал наведения миниатюр в положении увеличенного изображения

#html #css #image #image-gallery

Вопрос:

Я пытаюсь создать фотогалерею на этой странице:

http://cosimocode.com/wtnowork.html

 .gallerycontainer{
  position: relative;
  /*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
  border: 1px solid white;
  margin: 0 5px 5px 0;
}

.thumbnail:hover{
  background-color: transparent;
}

.thumbnail:hover img{
  border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
  position: absolute;
  background-color: lightyellow;
  padding: 5px;
  left: -1000px;
  border: 1px dashed gray;
  visibility: hidden;
  color: black;
  text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
  border-width: 0;
  padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
  visibility: visible;
  top: 1000px;
  left: 300px; /*position where enlarged image should offset horizontally */
  z-index: auto;
} 
 <div align="center">
  <div class="gallerycontainer">
    <a class="thumbnail" href="#thumb">
      <img src="/images/jjb01a.jpg" title="Huey 'Piano' Smith" width="100px" border="0" />
      <span><img src="/images/jjb01a.jpg" /></span>
    </a>

    <a class="thumbnail" href="#thumb">
      <img src="/images/jjb02.jpg" title="Archibald" width="100px" border="0" />
      <span><img src="/images/jjb02.jpg" /></span>
    </a>

    <a class="thumbnail" href="#thumb">
      <img src="/images/jjb03.jpg" title="James LaRocca amp; John Broven" width="100px" border="0" />
      <span><img src="/images/jjb03.jpg" /></span>
    </a>

    <a class="thumbnail" href="#thumb">
      <img src="/images/jjb04.jpg" title="Cosimo Recording" width="100px" border="0" />
      <span><img src="/images/jjb04.jpg" /></span>
    </a>

    <a class="thumbnail" href="#thumb">
      <img src="/images/jjb05.jpg" title="Cosimo Matassa" width="100px" border="0" />
      <span><img src="/images/jjb05.jpg" /></span>
    </a>
  </div>
</div>

и т.д…

Я хотел бы центрировать изображение, увеличенное при наведении миниатюры, в родительском контейнере страницы размером 660 пикселей, а не присваивать ему абсолютное положение сверху: и слева: px, которое, похоже, каким-то образом превышает заданную ширину контейнера… имеет ли это смысл? Я упускаю что-то очень очевидное? Я пытался изменить z-индекс и т. Д., Но безрезультатно.

Есть какие-нибудь идеи?? большое спасибо!!

Ответ №1:

Если вы хотите добиться этого без установки определенного верхнего и левого значения для центрирования изображения.

Вы должны добавить a position: relative в родительский контейнер. Затем измените атрибут top и left .thumbnail:hover span на 0 , а также добавьте a right: 0 . Чтобы центрировать absolute расположенный div (который является увеличенным изображением), добавьте margin: 0 auto . И, наконец, установите ширину этого элемента max-content равным .

CSS:

 .gallerycontainer {
  position: relative;
}

.thumbnail:hover span {
    visibility: visible;
    top: 0;
    left: 0;
    right: 0;
    z-index: auto;
    margin: 0 auto;
    width: max-content;
}

Комментарии:

1. СПАСИБО ТЕБЕ, МОЙ ДРУГ!! Это было добавление позиции: абсолютной; к интервалу наведения, которое, наконец, сделало это!

2. @RedKelly Не забудьте проголосовать и принять 😉

3. @RedKelly Просто нажмите на галочку и стрелку вверх

Метки: