Создать эффект наведения мыши для описания изображения в Javascript

У меня есть массив в JSON, который я отформатировал в сетку в HTML и стилизовал с помощью CSS. Используя console.info, он показывает все в моем массиве. Кто-нибудь знает, как я могу получить эффект наведения мыши, чтобы показать детали изображения, такие как информация «название» и «теги» поверх изображения.

Я нашел то, что мне нужно, по ссылке ниже, но я довольно запутался, как реализовать это с помощью javascript по ссылке ниже: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

На самом деле пытаюсь изучить Javascript, но не могу найти ничего полезного по этой теме.

const cont = document.querySelector(".cont");
const imageTitle = document.querySelector(".imageTitle");
const images = [{
    "src": "image1.jpeg",
    "title": "A two tone wall",
    "tags": ["wall", "two tone"]

  },
  {
    "src": "image2.jpeg",
    "title": "Cute doggy",
    "tags": ["dog", "walkies "]
  },
  {
    "src": "image3.jpeg",
    "title": "Natural splendor",
    "tags": ["natural", "mountain"]
  },
  {
    "src": "image4.jpeg",
    "title": "Man looking at phone",
    "tags": ["man", "phone"]
  },
  {
    "src": "image5.jpeg",
    "title": "Wavey wave",
    "tags": ["water", "wave"]
  },
  {
    "src": "image6.jpeg",
    "title": "Mountain range",
    "tags": ["mountain", "grass"]
  }


];
images.forEach(function(par) {
  cont.innerHTML += `<img src = "${par.src}" content = "${par.tags}" alt = "${par.title}">`;
});

.cont {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

img {
  width: 400px;
  height: 300px;
  margin: auto;
}

<div class = "cont">
</div>

Я сделал тебе фрагмент. Пожалуйста, добавьте несколько изображений из lorempixel. Также НЕ делайте html-тегов. Используйте все строчные буквы, пожалуйста

— 10.02.2019 19:13

Где ваши div и где преобразования CSS?

— 10.02.2019 19:14

Наконец, w3school — плохой ресурс. Пожалуйста, найдите SO для лучших примеров

— 10.02.2019 19:16

Спасибо. Это очень помогло. Я действительно понимаю, что вы сделали :)

— 10.02.2019 22:32

@KyeAtkinson, почему вы удалили принятые?

— 10.02.2019 22:38

@KyeAtkinson, пожалуйста, объясните, почему вы отозвали согласие?

— 10.02.2019 22:40

очень жаль, Догукан, на самом деле я повторно посетил свой пост и подумал, что сначала не принял ваш ответ. Все исправлено сейчас. Извинения.

— 10.02.2019 23:56

javascript html css arrays json

10.02.2019 19:05

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

304

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Пример w3school уже решил эту проблему за вас.

images.forEach(function(par) {
  cont.innerHTML += `<div class = "image-wrapper">
    <img src = "${par.src}" content = "${par.tags}" alt = "${par.title}">
    <p class = "image-desc">
        <span>Title: ${par.title}</span>
        <span>Tags: ${par.tags.join(', ')}</span>
    </p>
  </div>`;
});

Добавить класс css как

.image-wrapper {
    position: relative;
}
.image-wrapper image-desc{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}
.image-wrapper:hover image-desc{
    display: block;
}

10.02.2019 19:32

Ответ принят как подходящий

я делал на чистом css

const cont = document.querySelector(".cont");

const images = [
    {
        "src": "https://picsum.photos/300/200",
        "title": "A two tone wall",
        "tags": ["wall", "two tone"]

    },
    {
    "src": "https://picsum.photos/320/200", 
    "title": "Cute doggy", 
    "tags": ["dog", "walkies"]
},
{
    "src": "https://picsum.photos/330/200",
    "title": "Natural splendor", 
    "tags": ["natural", "mountain"]
},
{
    "src": "https://picsum.photos/300/210",
    "title": "Man looking at phone", 
    "tags": ["man", "phone"]
},
{
    "src": "https://picsum.photos/300/220",
    "title": "Wavey wave",
    "tags": ["water", "wave"]
},
{
    "src": "https://picsum.photos/300/230",
    "title": "Mountain range",
     "tags": ["mountain", "grass"]
    }

];

images.forEach(function(par){
  cont.innerHTML += `<div class = "parent"><img src = "${par.src}" alt = "${par.title}"><div class = "overlay"><div>${par.title}</div><div>${par.tags[0]}, ${par.tags[1]}</div></div></div>`;
});

.cont {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

img, .parent {
  width: 400px;
  height: 300px;
  margin: auto;
  position: relative;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  width:400px;
  height:300px;
  background: #000;
  opacity:0;
  z-index:2;
  transition:.5s;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  font-size:24px;
  font-family:"Segoe UI",sans-serif;
  flex-direction:column;
}

.overlay div:nth-child(2) {
  margin-top:20px;
  font-size:16px;
}

.parent:hover .overlay{
  opacity:.9;
}