Nikita-Fast

https://codepen.io/topicstarter/pen/WaKGjN пожалуйста, работает на hover

Разумеется что иконки я взял с font-awesome а текст стандартный lorem ipsum а чувака в центре с yandex картинок и подразумевается что всё это будет Вашим

До 500px проблем вообще нету, а дальше я не смог придумать что и как должно выглядеть : codepen/topicstarter/pen/preview/

не знаю как это в bootstrap но в css это абсолютное позиционирование

Ну я как обычно про SVG говорю
даже события можно повесить на разные маркеры разные события
только там не карта а фотка обычная
или надо отрисовать ?

<svg  version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
 <path transform="matrix(.73872 .67401 -.66417 .74758 0 0)" d="m157.42 35.068c11.576 1.8703 23.076 1.7628 33.532-2.9604-4.8792 14.896-5.7412 28.726-0.88931 41.041-11.052-4.0573-21.8-2.0324-32.244 0.36896 4.3409-10.936 5.5631-24.43-0.39881-38.449z" fill="#a7c6cf"  stroke="#49c2f4"  stroke-width="2"/>
</svg>

create new plain text document and rename it in file.svg and open Google Chrome

preview : https://jsfiddle.net/pqbyzn3L/

я не увидел там адаптивной галереи ...
наверно особенный комп у меня и самсунг и айфон какой то левый

Можно воспользоваться этим plugin и потом делать в сss hover

родителю display:flex;

https://codepen.io/topicstarter/pen/QZEQBb так можно

https://codepen.io/topicstarter/pen/zmqBJQ вот так можно

.list {
  list-style-type: none;
  display: flex;
  flex-wrap:wrap;
  width: 800px;
}

.card {
  min-width: 200px;
  background-color: tomato;
  margin: 10px;
  text-align: center;
  transition: 1s;
}

.card:hover {
  transform:scale(1.1);
  .btn {
    display: inline-block;
    opacity:1;
    visibility:visible;
  }
}

.btn {
  opacity:0;
  visibility:hidden;
  padding: 10px 20px;
  transform:translatey(-10px);
  transition:.4s;
}

https://codepen.io/topicstarter/pen/NLJyQa?editors=1100
здесь я не исправлял вёрстку а чуть чуть поправил css - добавил три строки