CODEWITHSUNDEEP
csshtmlimage
Java Gamer
Java Gamer

Reputation: 577

Image description box on image with css & html

I'm trying to create a image description box on the image and I want the image to a fade when you hover over the image.

This is what I want to acheive: enter image description here

On hover I want this: enter image description here

This is what I got so far:

HTML:

<div class="app-img-wrapper">
<a href="images/Example/pexels-photo-344544.jpeg" title="Image 1"> <img src="images/Example/pexels-photo-344544.jpeg" class="img-responsive" alt="App"> <h2><span>Image Text</span></h2> </a>
</div>

CSS:

.app-img-wrapper {
    position: sticky;
}

.app-img-wrapper h2 {
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 100%;
}

.app-img-wrapper h2 span{
    color: white;
    font-size: 35px;
    font-weight: 400;
    text-align: center;
    /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
}

Result:

enter image description here

As you can see, I'm almost there but having trouble with matching the box to the image size. If anyone has any tips please suggest below

Upvotes: 2

Views: 4097

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

No need for the span in your h2. Added some helper classes to everything, and am making the overlay out of a pseudo element of the a tag. Added some transitions so everything fades, but you can adjust that as you see fit.

.app-img-wrapper {
  position: sticky;
  display: inline-block;
}

.app-img-link:hover:before {
  opacity: 1;
}

.app-img-link:hover .app-img-text {
  background: rgba(34, 139, 34, 0.7);
  color: black;
}

.app-img {
  display: block;
}

.app-img-text {
  position: absolute;
  bottom: 0%;
  left: 0;
  right: 0;
  color: white;
  font-size: 35px;
  font-weight: 400;
  text-align: center;
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  margin: 0;
  transition: background .5s, color .5s;
}

.app-img-link:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: 'Click to view info';
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity .5s;
  opacity: 0;
}
<div class="app-img-wrapper">
  <a href="http://kenwheeler.github.io/slick/img/fonz1.png" class="app-img-link" title="Image 1"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="img-responsive app-img" alt="App">
    <h2 class="app-img-text">Image Text</h2>
  </a>
</div>

Upvotes: 2

Related Questions