Александр

видимо, ему перекрывают дорогу другие дивы.
попробуйте поставить position: absolute

как пример

clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

clip-path: polygon(0% 0%, 75% 0%, 100% 20%, 100% 100%, 0 100%);

#hexagon {
	width: 100px;
	height: 55px;
	background: red;
	position: relative;
}
#hexagon:before {
	content: "";
	position: absolute;
	top: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}

ну, насколько я вижу, в вашем примере картинок нету - это символы.

document.write(arr[0])
document.write("➔" + arr[1])
document.write("➔" + arr[2])

вы можете взять за основу анимацию из фреймворка animate.css
пролистав ниже, вы сможете увидеть подробную инструкцию.

вы такое имели в виду?


если да, то вот код:

$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});