Создание текста при наведении курсора на изображение в css - PullRequest
Новая
       8

Создание текста при наведении курсора на изображение в css

0 голосов
/ 03 марта 2020

Я пытаюсь, чтобы текст абзаца появлялся, когда я наводил курсор на каждое из изображений. Текст должен быть в центре изображения. Я не совсем уверен, как мне этого добиться.

Другая проблема, с которой я столкнулся, заключается в том, что если я установил top: 0 и удалил преобразование, текст на самом деле не помещается вверху: 0, есть некоторые поле между верхом и местом, где находится текст.

Кодовый код внизу:

https://codepen.io/uhzyrneh/pen/WNvOaWB

* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  background-color: black;
}

.container div {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.container div img {
  width: 100%;
  transition: 0.4s;
  transform: scale(1.1);
  opacity: 0.7;
}

.container div img:hover {
  transform: scale(1.03);
  opacity: 1;
}

.container div p {
  color: white;
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 50px;
  opacity: 1;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <div class="">
      <img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
      <p>Test</p>
    </div>
    <div class="">
      <img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
      <p>Test2</p>
    </div>
    <div class="">
      <img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
    <div class="">
          <img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
    <div class="">
      <img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
  </div>
</body>

</html>

Ответы [ 2 ]

2 голосов
/ 03 марта 2020

Правило, которое вы ищете: 

.container div:hover p {
  display: inline;
}

И скрыть текст для начала, добавив display: none; к .container div p.

Кроме того, текст в вершина div. Если вы выделите его, то увидите, что он прямо на вершине. 

* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  background-color: black;
}

.container div {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.container div img {
  width: 100%;
  transition: 0.4s;
  transform: scale(1.1);
  opacity: 0.7;
}

.container div img:hover {
  transform: scale(1.03);
  opacity: 1;
}

.container div p {
  color: white;
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 50px;
  opacity: 1;
  display: none;
}
.container div:hover p {
  display: inline;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <div class="">
      <img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
      <p>Test</p>
    </div>
    <div class="">
      <img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
      <p>Test2</p>
    </div>
    <div class="">
      <img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
    <div class="">
          <img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
    <div class="">
      <img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
  </div>
</body>

</html>
1 голос
/ 03 марта 2020

Вы можете использовать так: 

* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  background-color: black;
}

.container div {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.container div img {
  width: 100%;
  transition: 0.4s;
  transform: scale(1.1);
  opacity: 0.7;
}

.container div img:hover {
  transform: scale(1.03);
  opacity: 1;
}

.container div p {
  color: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 50px;
  opacity: 1;
}
.container div a:hover::after{
  content: attr(title);
  display:block;
  position:absolute;
  width:100%;
  height:200px;
  top:50px;
  left:0;
  z-index:1;
  opacity: 1;
  font-size: 50px;
  color:#fff;
  text-align:center;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <div class="">
      <a href="#" title="Img Title 1"><img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"></a>
    </div>
    <div class="">
      <a href="#" title="Img Title 2"><img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"></a>
    </div>
    <div class="">
      <a href="#" title="Img Title 3"><img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"></a>
    </div>
    <div class="">
      <a href="#" title="Img Title 4"><img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"></a>
    </div>
    <div class="">
          <a href="#" title="Img Title 5"><img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"></a>
    </div>
    <div class="">
      <a href="#" title="Img Title 6"><img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"></a>
    </div>
    <div class="">
      <a href="#" title="Img Title 7"><img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"></a>
    </div>
    <div class="">
      <a href="#" title="Img Title 8"><img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"></a>
    </div>
  </div>
</body>

</html>
...