CODEWITHSUNDEEP
htmltwitter-bootstrapcss
neca
neca

Reputation: 139

How can i make hover effect on image with caption

so im having little bit of strugle making this work.

So basicly what i am trying to make is image with caption under it and when you hover over image it gets greenish color with transparency and a plus sign on it.

What ive tried so far is to make <div class=parent> and inside of <div class=parent> i would have <img> and another <div class="overlay">

HTML

<section class="gallery">
  <div class="container">
    <div class="row">
      <div class="parent">
        <img src="img/showcase.jpg">
        <div class="overlay">
          <i class="fas fa-plus"></i>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

.gallery .overlay {
background: rgba(0, 188, 156, 0);
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; 
} /* this div overlay will be greenish transparent color over an image when image is hovered */

.gallery .parent {
 margin-top: 40px; 
} /* this is just some spacing when images go one under another */

.gallery .parent:hover .overlay {
background: rgba(0, 188, 156, 0.8); 
}

.gallery .parent:hover .fa-plus {
color: white; 
}

.gallery .fa-plus {
position: absolute;
top: 50%;
left: 50%;
color: rgba(255, 255, 255, 0);
font-size: 1.75em; 
}

so this works perfectly fine.

enter image description here

But when i put caption in my HTML.

<section class="gallery">
  <div class="container">
    <div class="row">
      <div class="parent">
       <img src="img/showcase.jpg">
       <div class="overlay">
         <i class="fas fa-plus"></i>
       </div>
       <div class="caption">
        <h5>Lorem ipsum dolor.</h5>
        <h6>lorem</h6>
      </div>
     </div>
  </div>

<div class="overlay"> stretches all the way down

enter image description here

im running out of ideas how to make this possible especially because i need it to be responsive, images are changing widths and heights based on the resolution so i can put <div class="overlay> height on 80% or 90%

EG on medium devices.

enter image description here

Upvotes: 1

Views: 140

Answers (1)

Temani Afif
Temani Afif

Reputation: 273086

Put the image inside its own container where you can add the overlay:

.img-container {
 display:inline-block;
 position:relative;
}
.img-container img {
 display:block;
}

.overlay {
  background: rgba(0, 188, 156, 0);
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.gallery .parent {
  margin-top: 40px;
}

.gallery .img-container:hover .overlay {
  background: rgba(0, 188, 156, 0.8);
}

.gallery .img-container:hover .fa-plus {
  color: white;
}

.gallery .fa-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(255, 255, 255, 0);
  font-size: 1.75em;
}
<section class="gallery">
  <div class="container">
    <div class="row">
      <div class="parent">
        <div class="img-container">
          <img src="https://lorempixel.com/400/200/ ">
          <div class="overlay ">
            <i class="fas fa-plus ">+</i>
          </div>
        </div>
        <div class="caption ">
          <h5>Lorem ipsum dolor.</h5>
          <h6>lorem</h6>
        </div>
      </div>
    </div>

Upvotes: 2

Related Questions