Text when hover on HTML

Question

I would like to place a text on an image when hovering it. So far, I have created a hover effect to zoom the picture in and reduce the opacity which looks smooth. My problem now is to place text on the image because I am not sure how to place it in the picture.

Here is what I have so far: enter link description here

Code:

#portfolio {
  background-color: : white;
  padding-bottom: 100px;
}

#portfolio h1 {
  font-size: 30px;
  font-weight: 400px;
  letter-spacing: 5px;
  text-align: center;
  color: #000;
}

#portfolio h2 {
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  color: #000;
}

.project {
  display: inline-block;
  width: 33.33%;
  margin-right: -4px;
}

.img-box {
  padding: 20px;
}

.project img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.img-box img:hover {
  transform: scale(1.1);
  transition: 0.5s;
  opacity: 0.5;
}

<section id="portfolio">
  <div class="container">
    <h1>MY WORK</h1>
    <h2>Below you will find my favorite projects & school assignments</h2>
    <!--CPU-->
    <div class="project">
      <div class="img-box">
        <img src="./img/cpu.png">
      </div>
    </div>
    <!--JAVA-->
    <div class="project">
      <div class="img-box">
        <img src="./img/JSON.png">
      </div>
    </div>
    <!--PHOTOSHOP-->
    <div class="project">
      <div class="img-box">
        <img src="./img/photoshop.png">
      </div>
    </div>
  </div>
</section>

Answer 1

You can use pseudo-element and you can either add the text you want as an attribute value or add it manually which would be hideous. and then style it as you would, but of course add position:absolute to take it off of the flow so it can be put on top of the image. And don't forget your position:relative on the parent.

I used the div, because <img> doesn't have a closing tag therefore no pseudo-elements

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#portfolio {
  background-color: : white;
  padding-bottom: 100px;
}

#portfolio h1 {
  font-size: 30px;
  font-weight: 400px;
  letter-spacing: 5px;
  text-align: center;
  color: #000;
}

#portfolio h2 {
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  color: #000;
}

.project {
  display: inline-block;
  width: 33.33%;
  margin-right: -4px;
}

.img-box {
  padding: 20px;
  position: relative;
}

.img-box:after {
  /* the text will be coming from the custom attribute data-text*/
  content: attr(data-text);
  background: #000000ba;
  width: 100%;
  font-size: 1.5em;
  padding: 10px 0;
  left: 0;
  bottom: 0;
  text-align: center;
  position: absolute;
  opacity: 0;
  transition: opacity .2s linear;
}

.img-box:hover:after {
  opacity: 1;
}

.project img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.img-box img:hover {
  transform: scale(1.1);
  transition: 0.5s;
  opacity: 0.5;
}

<section id="portfolio">
  <div class="container">
    <h1>MY WORK</h1>
    <h2>Below you will find my favorite projects & school assignments</h2>
    <!--CPU-->
    <div class="project">
      <div data-text="Text" class="img-box">
        <img src="http://via.placeholder.com/350x150">
      </div>
    </div>
    <!--JAVA-->
    <div class="project">
      <div data-text="text on image" class="img-box">
        <img src="http://via.placeholder.com/350x150">
      </div>
    </div>
    <!--PHOTOSHOP-->
    <div class="project">
      <div data-text="i'm a text too" class="img-box">
        <img src="http://via.placeholder.com/350x150">
      </div>
    </div>
  </div>
</section>

Answer 2

Add another DIV as a child element to .img-box with settings as follows which contains the text. The most important part is position: absolute, plus the top, left and transform settings for the text position.

.img-box .hovertext {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.img-box:hover .hovertext {
  display: block;
}

Also make sure to add position: relative to .img-box to create an anchor element for the absolutely positioned text DIV:

#portfolio {
  background-color: : white;
  padding-bottom: 100px;
}

#portfolio h1 {
  font-size: 30px;
  font-weight: 400px;
  letter-spacing: 5px;
  text-align: center;
  color: #000;
}

#portfolio h2 {
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  color: #000;
}

.project {
  display: inline-block;
  width: 33.33%;
  margin-right: -4px;
}

.img-box {
  padding: 20px;
  position: relative;
}

.project img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.img-box img:hover {
  transform: scale(1.1);
  transition: 0.5s;
  opacity: 0.5;
}

.img-box .hovertext {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.img-box:hover .hovertext {
  display: block;
}

<section id="portfolio">
  <div class="container">
    <h1>MY WORK</h1>
    <h2>Below you will find my favorite projects & school assignments</h2>
    <!--CPU-->
    <div class="project">
      <div class="img-box">
        <img src="./img/cpu.png">
        <div class="hovertext">Test Text 1</div>
      </div>
    </div>
    <!--JAVA-->
    <div class="project">
      <div class="img-box">
        <img src="./img/JSON.png">
        <div class="hovertext">Test Text 2</div>
      </div>
    </div>
    <!--PHOTOSHOP-->
    <div class="project">
      <div class="img-box">
        <img src="./img/photoshop.png">
        <div class="hovertext">Test Text 3</div>
      </div>
    </div>
  </div>
</section>