How do I make a simple 4 picture image gallery with text overlay on hover?

See more:

CSS

HTML

image

I am simply trying to get 4 images to be of equal size centered over a background with text overlay on hover on the images. I don't know if my question makes sense exactly haha. I'm not much of a coder and likely won't be going more advanced than this anytime soon. I'm just looking for the "quick and easy fix" if it exists.


As you can see with my code (hopefully) I'm trying to take these 4 sample images and center them with a decent amount of text that shows on hover. I don't know if this is possible, but I'd like them to be reasonably centered with a decent visual of the background in between. Maybe (side note and less important) is there a way to make a scroll box on overflow on the hover/overlay too? Thank you very much for your time.

What I have tried:

body,
html {
height: 100%;
margin: 0;
}

.bg {
background-image: url("http://static1.businessinsider.com/image/587621bcdd08953f208b491a/14-eerily-beautiful-photos-of-europes-first-underwater-art-museum.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

ul {
list-style-type: none;
}

.container {
position: relative;
width: 48%;
float: right;
margin-bottom: 70px;
}

.image {
display: inline-block;
width: 300px;
height: 200px;
margin: auto;
border-radius: 15%
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 200px;
width: 300px;
opacity: 0;
transition: 2s ease;
background-color: green;
border-radius: 15%
}

.container:hover .overlay {
opacity: .75;
}

.text {
color: white;
font-size: 1.5vw;
position: absolute;
top: 50%;
left: 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>