Trying to align 3 images with hover overlay horizontally

HTML & CSS
1

I have three images that have an overlay on hover aligned horizontally on my page. The images are laid out exactly where I want them, however the overlay is way off! How do I get it to lay on top of the image that it’s supposed to go with?

Here is my HTML and my CSS:

 <section id="overlayimgs">
            <div class="smore">
            <img src="smores.jpg" alt="Picture of a smore" class="image">
                <div class="overlay">
                    <div class="h3text">Perfect Fall S'mores</div>
                    <div class="text">Pricing is based on 
                    number of guests. Call us today for your price.</div>
                </div>
            </div>
            
            <div class="weddingdoughnut">
            <img src="doughnuts.jpg" alt="Picture of doughnuts" class="image">
                <div class="overlay">
                    <div class="h3text2">Fresh Baked Doughnuts</div>
                    <div class="text2">Unlimited Flavor and Icing combinations, Minimum order of 2 dozen,
                        $30.00 for 24</div>
                </div></div>
            
            <div class="weddingpoptart">
            <img src="poptarts.jpg" alt="Picture of poptarts" class="image">
                <div class="overlay">
                    <div class="h3text3">Homemade Poptarts</div>
                    <div class="text3">Minimum order of 2 dozen, Unlimited flavor options, $25.00 for 24</div>
                </div></div>
            </section>

.smore, .weddingdoughnut, .weddingpoptart{
  position: relative;
  width: 50%;
  display: inline;
  padding-right: 60px;
  padding-left: 60px;
}
.image {
  display: inline-block;
  border-radius: 150px;
  width: 300px;
  height: 300px;
}
#overlayimgs{
    text-align: center;
    padding-top: 60px;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  width: 300px;
  opacity: 0;
  transition: .5s ease;
  background-color: #3b1f1b;
  border-radius: 150px;
}

.smore:hover .overlay{
  opacity: 1;
}
.weddingdoughnut:hover .overlay{
    opacity: 1;
}
.weddingpoptart:hover .overlay{
    opacity: 1;
}
.h3text, .h3text2, .h3text3{
  font-family: "playfair display";
  text-align: center;
  color: white;
  font-size: 24px;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.text, .text2, .text3{
  font-family: "playfair display";
  text-align: center;
  color: white;
  font-size: 16px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Can someone offer some insight as to what I’m doing wrong? Thank you.

2

The problem is your container elements are set to display: inline so they don’t have the volume of a block element for the overlay to fit to, this causes the vertical offset. Using inline-block is more suitable.
You also have that 50% width, making the container larger than the image and creating a horizontal offset.
In addition the 60px padding on the container creates a further horizontal offset. This can be compensated by setting left: 60px on the overlay.

1 Like
3

That took care of it! Thank you so much!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.