CODEWITHSUNDEEP
htmlcssresponsive
angelahaiqi
angelahaiqi

Reputation: 23

How do I align a div element onto an image in a responsive matter?

I'm working on my portfolio site now. My projects are listed as clickable images, arranged into two columns. I want it that when a user hovers over an image, a solid block of color covers it with the project title in the center. Basically like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade.

I had it working perfectly when I used row/column css classes, but since I've found that to not be very responsive (on mobile, the first column gets stacked on top of the other, which makes sense but that's not the order I want), I aligned the images with float and padding instead. Now, the hover effect/link stretches across the entire page, instead of being contained in the image area.

Here's my code for reference:

CSS

    .container {
        position: relative;
    }
   .image {
        display: block;
        height: auto;
   }
   .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
        height: 100%;
        width: 100%;
       transition: .5s ease;
  }
  .container:hover .overlay {
       opacity: 1;
  }
  .text {
       color: white;
       font-size: 30px;
       font-family: "Lato-Bold";
       position: absolute;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       text-align: center;
   }
  @media screen and (min-width: 1025px) {
       .image {
           float: left;
           width: 45%;
           padding-left: 40px;
           padding-right: 15px;
           padding-bottom: 30px;
       }
  }

HTML

     <div class = "container">
          <a href = "link"><img src="image name" class = "image"></a>
          <div class="overlay" style = "background-color: #color;">
               <div class="text">project title</div>
          </div>
     </div>

How can I fix this? I've tried adding display: block to the .overlay class. I've tried making the .overlay class the same size as the image. I've also tried wrapping the link around the container class instead of the other way around like it is now. Nothing happens at all. I've also tried adjusting the container size, but that shrunk the images and stacked them into 1 column :(

Upvotes: 0

Views: 54

Answers (1)

Ismail Vittal
Ismail Vittal

Reputation: 1103

Read about Responsive Images and Flexbox

Try the following code.

Note: I changed the HTML structure slightly.

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.thumb {
  position: relative;
  width: 50%;
}

.thumb img {
  width: 100%;
}

.thumb:hover .overlay {
  opacity: 1;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  transition: .5s ease;
  color: #000;
  background: #fff;
}

.overlay .text {
  position: absolute;
  top: 50%;
  transform: translate(-50%);
  left: 50%;
  text-align: center;
}
<div class="container">
  <a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
    <div class="overlay">
      <div class="text">project title</div>
    </div>
  </a>
  <a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
    <div class="overlay">
      <div class="text">project title</div>
    </div>
  </a>
  <a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
    <div class="overlay">
      <div class="text">project title</div>
    </div>
  </a>
  <a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
    <div class="overlay">
      <div class="text">project title</div>
    </div>
  </a>
</div>

Upvotes: 1

Related Questions