Member 13610925 Ответов: 0

Как сделать простую галерею изображений из 4 картинок с наложением текста при наведении курсора?

Я просто пытаюсь получить 4 изображения одинакового размера, центрированные на фоне с наложением текста при наведении курсора на изображения. Я не знаю, имеет ли мой вопрос смысл именно так, ха-ха. Я не очень хороший программист и, скорее всего, не буду продвигаться дальше этого в ближайшее время. Я просто ищу "быстрое и легкое решение", если оно существует.


Как вы можете видеть с моим кодом (надеюсь) Я пытаюсь взять эти 4 образца изображений и центрировать их с приличным количеством текста, который отображается при наведении курсора. Я не знаю, возможно ли это, но я бы хотел, чтобы они были разумно центрированы с приличным визуальным фоном между ними. Может быть (боковое примечание и менее важное) есть ли способ сделать окно прокрутки при переполнении на наведении/наложении тоже? Большое вам спасибо за ваше время.

Что я уже пробовал:

тело,
HTML {
высота: 100%;
маржа: 0;
}

.Бритиш газ {
фоновое изображение: url("http://static1.businessinsider.com/image/587621bcdd08953f208b491a/14-eerily-beautiful-photos-of-europes-first-underwater-art-museum.jpg");
высота: 100%;
фон-положение: центр;
фон-повторить: не повторять;
фон-размер: обложка;
}

ул {
список-стиль-тип: нет;
}

.контейнер {
положение: относительное;
ширина: 48%;
поплавок: правый;
маржа-дно: 70px;
}

.изображение {
дисплей: встроенный блок;
ширина: 300px;
высота: 200px;
маржа: авто;
граница-радиус: 15%
}

.наложить {
положение: абсолютное;
топ: 0;
дно: 0;
слева: 0;
справа: 0;
высота: 200px;
ширина: 300px;
непрозрачность: 0;
переход: легкость 2s;
цвет фона: зеленый;
граница-радиус: 15%
}

.контейнер:наведите .наложение {
непрозрачность: .75;
}

.текст {
белый цвет;
размер шрифта: 1.5 vw;
положение: абсолютное;
топ: 50%;
осталось: 35%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}



<div class="bg">
  <div class="container">
    <img src="https://i.pinimg.com/736x/96/3b/ee/963beeb07d222d64094a25bc3840b532--easter-bunny-a-bunny.jpg" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">
        It's a vampire bunneh!!! BUNNICULA!!!! YES!!! HAHAHAHA
      </div>
    </div>
  </div>

  <div class="container">
    <img src="https://i.ytimg.com/vi/Q6xybdaV3xs/maxresdefault.jpg" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">
        <ul>
          <li>This really isn't my text</li>
          <li>But I'm playing with it anyway</li>
          <li>To show my UL stuff</li>
          <li>or something of that nature</li>
          <li>Hi and thank you</li>
          <li>if you choose to help</li>
          <li>Or if you just want to laugh and watch</li>
      </div>
    </div>
  </div>

  <div class="container">
    <img src="http://www.herts.ac.uk/__data/assets/image/0009/66717/rocket_car_launch.jpg" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">
        I thought this thing was kinda cool
      </div>
    </div>
  </div>

  <div class="container">
    <img src="https://upload.wikimedia.org/wikipedia/en/e/eb/Spaceball_jump_over_Skydive_35.jpg" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">
        I've always wanted to go skydiving!
      </div>
    </div>
  </div>
</div>

Karthik_Mahalingam

пробовать

   <ul style=" overflow: auto; height: 190px;">

0 Ответов