JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<div id="artists">
  <div class="artist" data-name="surikov">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/1b/8f/99/1b8f99acddc5f723668601424acd9e5d.jpg" alt="">
    <h3>Суриков Василий Иванович</h3>
  </div>
  <div class="artist" data-name="vinsent">
    <img src="https://ae01.alicdn.com/kf/HTB1BvsGKXXXXXcrXXXXq6xXFXXX5/Картины-винсента-Ван-Гога-Автопортрет-с-Темными-Фетровая-Шляпа-картина-на-Холсте-Высокое-качество-ручной-росписью.jpg" alt="ВанГог">
    <h3>Винсент Ван Гог</h3>
  </div>
  <div class="artist" data-name="leonardo">
    <img src="https://24smi.org/public/media/235x307/celebrity/2017/02/23/q65iaWURSo4k_leonardo-da-vinchi.jpg" alt="">
    <h3>Леонардо да Винчи</h3>
  </div>
  <div class="artist" data-name="dali">
    <img src="http://www.arthistory.ru/img/dali/salvador_dali_foto.jpg" alt="">
    <h3>Сальвадор Дали</h3>
  </div>
</div>

<div id="content">
  <img src="" alt="">
  <p></p>
</div>

CSS

#content {
  padding: 5px;
  margin-top: 30px;
  width: 100vh;
  background-color: #fff;
  min-height: 100px;
  display: table;
  transition: box-shadow 1s;
}

#content:hover{
  -webkit-box-shadow: 2px 5px 10px -2px rgba(0, 0, 0, 0.59);
  -moz-box-shadow: 2px 5px 10px -2px rgba(0, 0, 0, 0.59);
  box-shadow: 2px 5px 10px -2px rgba(0, 0, 0, 0.59);
}

#content p {
  display: table-cell;
  width: 65vh;
  vertical-align: top;
}

#content img{
  width: 30vh;
  display: table-cell;
}
.artist img {
  transition: all 1s;
  width: 20vh;
  margin: 5px auto;
  display: block;
}

.artist:hover img {
  transform: scale(1.05);
}

.artist:hover {
  cursor: pointer;
  -webkit-box-shadow: 2px 5px 10px -2px rgba(0, 0, 0, 0.59);
  -moz-box-shadow: 2px 5px 10px -2px rgba(0, 0, 0, 0.59);
  box-shadow: 2px 5px 10px -2px rgba(0, 0, 0, 0.59);
}

.artist {
  transition: all 1s;
  width: 25vh;
  display: table-cell;
  margin: 0;
}

#artists {
  display: table;
}

.artist h3 {
  text-align: center;
}

html,
body {
  padding: 0;
  margin: 0;
}

JavaScript

$('#content').hide();
$('.artist').click(function() {
  var dataName = $(this).attr('data-name');
  var imgSrc = artists[dataName]['img'];
  var pText = artists[dataName]['text'];
  $('#content').fadeOut(1000, function(){
  	$('#content img').attr('src', imgSrc);
  	$("#content p").html(pText);
    $('#content').fadeIn('slow');
  });
});

var artists = {
	leonardo: {
  	img: 'https://img.pravda.ru/image/article/3/8/0/291380.jpeg',
    text: 'Леона́рдо ди сер Пье́ро да Ви́нчи (итал. Leonardo di ser Piero da Vinci; 15 апреля 1452, селение Анкиано, около городка Винчи, близ Флоренции — 2 мая 1519, замок Кло-Люсе, близ Амбуаза, Турень, Франция) — итальянский художник (живописец, скульптор, архитектор) и учёный (анатом, естествоиспытатель), изобретатель, писатель, музыкант, один из крупнейших представителей искусства Высокого Возрождения, яркий пример «универсального человека» (лат. homo universalis).'
  },
  vinsent: {
    img: 'http://www.arthistory.ru/img/vangog/zvezdnaya_noch_vangog.jpg',
    text: 'Винсе́нт Ви́ллем Ван Гог (нидерл. Vincent Willem van Gogh; 30 марта 1853, Грот-Зюндерт, Нидерланды — 29 июля 1890, Овер-сюр-Уаз, Франция) — нидерландский художник-постимпрессионист, чьи работы оказали вневременное влияние на живопись 20 века. За десять с небольшим лет он создал более 2100 произведений, включая около 860 картин маслом. Среди них — портреты, автопортреты, пейзажи, натюрморты, оливковые деревья, кипарисы, поля пшеницы и подсолнухи. Большинство критиков не замечало Ван Гога до его самоубийства в возрасте 37 лет, которому предшествовали годы тревог, нищеты и расстройств рассудка.'
  },
  surikov: {
    img: "https://muzei-mira.com/templates/museum/images/paint/pokorenie-sibiri-ermakom-.jpg",
    text: "Васи́лий Ива́нович Су́риков (12 (24) января 1848, Красноярск — 6 (19) марта 1916, Москва) — русский живописец, мастер масштабных исторических полотен."
  },
  dali: {
    img: 'http://opisanie-kartin.com/uploads/image015.jpg',
    text: 'Сальвадо́р Дали́...