How to add text overlay effect on hover using CSS with text?

Question

I would like to add an overlay effect to all images, with text overlaying the image. I tried tutorials but could not get it to work. All the images are located in main.js.

const petsData = [{
    name: "Purrsloud",
    species: "Cat",
    favFoods: ["wet food", "dry food", "<strong>any</strong> food"],
    birthYear: 2016,
    brick: "brick",
    photo: "https://learnwebcode.github.io/json-example/images/cat-2.jpg"
  },
  {
    name: "Barksalot",
    species: "Dog",
    birthYear: 2008,
    photo: "https://learnwebcode.github.io/json-example/images/dog-1.jpg"
  },
  {
    name: "Meowsalot",
    species: "Cat",
    favFoods: ["tuna", "catnip", "celery"],
    birthYear: 2012,
    photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg"
  }
];





function petTemplate(pet) {
  return `
              <div class="animal">
              
             <img class="pet-photo" src="${pet.photo}"> 
              <h2 class="pet-name">${pet.name} <span class="species">(${pet.species})</span></h2>
        
              </div>
            `;
}

document.getElementById("app").innerHTML = `
            <h1 class="app-title">Pets (${petsData.length} results)</h1>
            ${petsData.map(petTemplate).join("")}
    
          `;

.img {
  max-width: 400px;
  position: relative;
}

.app-title {
  text-align: center;
  font-weight: normal;
  font-size: 2.6rem;
}

.animal {
  max-width: 650px;
  padding: 20px;
  margin: 30px auto;
  background-color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.animal h4 {
  margin: 0 0 6px 0;
}

.pet-photo {
  float: left;
  width: 100%;
  display: block;
  transition: all linear 0.7s;
  margin-right: 15px;
  position: relative;
}

.pet-name {
  font-size: 2rem;
  font-weight: normal;
  margin: 0 0 1rem 0;
}

.species {
  font-size: 0.9rem;
  color: #888;
  vertical-align: middle;
}

<div id="app"></div>
<script src="main.js"></script>

Thank you.

Edit - Want it to look something like this https://www.youtube.com/watch?v=exb2ab72Xhs&t=475s need to show the text on hover with a black overlay appearing on the back of the text (when hovered on)

"I could not get it to work" what does "work" mean here? How do you want it to look like? — Wais Kamal, Nov 08 '20 at 14:37
Hi Luis!, quick question: What do you mean with overlay? could you upload an image to visualize what you want? — Rod Ramírez, Nov 08 '20 at 14:38
Just position your pet-name over the image, add something like `.pet-name{ position: aboslute; left: 0; right: 0; bottom: 0;}` — skobaljic, Nov 08 '20 at 14:41

cssyphus · Accepted Answer · 2020-11-08T15:01:36.617

Create a div that will overlay the image, and populate it with the petsData information. Style that overlay div as position:absolute and set the top, width and z-index values appropriately.

Note that in order for position:absolute to work on the overlay div, the parent div must be styled as position: relative (or absolute - anything except the default, which is static)

const petsData = [{
    name: "Purrsloud",
    species: "Cat",
    favFoods: ["wet food", "dry food", "<strong>any</strong> food"],
    birthYear: 2016,
    brick: "brick",
    photo: "https://learnwebcode.github.io/json-example/images/cat-2.jpg"
  },
  {
    name: "Barksalot",
    species: "Dog",
    birthYear: 2008,
    photo: "https://learnwebcode.github.io/json-example/images/dog-1.jpg"
  },
  {
    name: "Meowsalot",
    species: "Cat",
    favFoods: ["tuna", "catnip", "celery"],
    birthYear: 2012,
    photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg"
  }
];





function petTemplate(pet) {
  return `
     <div class="animal">
        <img class="pet-photo" src="${pet.photo}"> 
        <h2 class="pet-name">${pet.name} <span class="species">(${pet.species})</span></h2>
        <div class="olay">
            <div>Name: ${pet.name}</div>
            <div>Type: ${pet.species}</div>
            <div>Favs: ${pet.favFoods !== undefined ? pet.favFoods : ''}</div>
            <div>Born: ${pet.birthYear}</div>
        </div>
     </div>
  `;
}

document.getElementById("app").innerHTML = `
     <h1 class="app-title">Pets (${petsData.length} results)</h1>
     ${petsData.map(petTemplate).join("")}
  `;

.img {
  max-width: 400px;
  position: relative;
}

.app-title {
  text-align: center;
  font-weight: normal;
  font-size: 2.6rem;
}

.animal {
  max-width: 650px;
  padding: 20px;
  margin: 30px auto;
  background-color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.animal h4 {
  margin: 0 0 6px 0;
}

.pet-photo {
  float: left;
  width: 100%;
  display: block;
  transition: all linear 0.7s;
  margin-right: 15px;
  position: relative;
}

.pet-name {
  font-size: 2rem;
  font-weight: normal;
  margin: 0 0 1rem 0;
}

.species {
  font-size: 0.9rem;
  color: #888;
  vertical-align: middle;
}

/*  ADDED  */
.animal{position:relative;}
.olay{
  position:absolute;
  z-index: 1;
  top: 30%;
  width: 100%;
  padding: 0 10%;
  font-size: 2rem;
  color: lightcyan;
}

<div id="app"></div>
<script src="main.js"></script>

Thank you this works but how do i get a black background behind it when o hover on it? — Luis Maximus, Nov 08 '20 at 18:22
Thank you for the tips ill keep that in mind the next time. I figured it out somehow works nicely, — Luis Maximus, Nov 09 '20 at 04:30

How to add text overlay effect on hover using CSS with text?

1 Answers1