Vue.js - пользовательская сетка фотографий с пользовательским наложением

Question

как я могу сделать сетку фотографий (каждая фотография - карта) с пользовательским наложением.когда пользователь наведет курсор на фотографию, он увидит наложение деталей.так что пользователь увидит фотографию и детали на ней.

Я пытался сделать это с помощью "Beautify" и "Bootstrap-Vue" и не удалось.

пример того, что я ищу: пример сайта

Answer 1

Просто создайте свою сетку предметов - стилизуйте их с помощью загрузочного компонента «Карта» и системы сетки, чтобы сделать ее сеткой.

Затем просто используйте этот пользовательский компонент vue с v-for и затем привяжите @mouseover + @mouseleave к этому элементу, чтобы изменить состояние свойства hovered или как вы хотите его вызывать.Затем просто измените ваш текст или структуру в вашем компоненте в соответствии с состоянием наведения.

Простая демонстрация здесь: http://jsfiddle.net/e8y0hLps/