Текст при наведении на HTML

Question

Я бы хотел разместить текст на изображении при наведении на него курсора.До сих пор я создал эффект наведения, чтобы увеличить изображение и уменьшить непрозрачность, которая выглядит гладкой.Сейчас моя проблема - разместить текст на изображении, потому что я не уверен, как разместить его на картинке.

Вот что у меня есть: введите описание ссылки здесь

Код:

#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

Вы можете использовать pseudo-element, и вы можете либо добавить нужный текст в качестве значения атрибута, либо добавить его вручную, что было бы отвратительно.и затем стилизуйте его так, как вы бы сделали, но, конечно, добавьте position: absolute, чтобы снять его с потока, чтобы его можно было поместить поверх изображения.И не забывайте свой position:relative на родительском.

Я использовал div, потому что <img> не имеет закрывающего тега, поэтому нет 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

Добавьте еще один DIV как дочерний элемент к .img-box со следующими настройками, которые содержат текст.Самая важная часть - position: absolute, а также настройки top, left и transform для положения текста.

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

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

Также обязательно добавьте position: relative к .img-box ксоздать элемент привязки для абсолютно позиционированного текста 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>