JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  <div class="element active">
    <div class="element-image"><img src="https://78.media.tumblr.com/08e9fdde036a1ebc15b07658510bb3ca/tumblr_p0vwsfkKsj1qlioplo1_540.jpg" alt=""></div>
    <div class="element-text" style="background-color: #FF5D4A;">
      Дизайн и проектирование сайта от коллектива дизайнеров из Красноярска для системы управления грузовыми перевозками
    </div>
  </div>
   <div class="element">
    <div class="element-image"><img src="https://78.media.tumblr.com/34b1df30d7c0ea2e048856df3fa5fe76/tumblr_p0vq9prqAN1qa9armo1_500.jpg" alt=""></div>
    <div class="element-text" style="background-color: #73A51D;">
      Дизайн и проектирование сайта от коллектива дизайнеров из Красноярска для системы управления грузовыми перевозками
    </div>
  </div>
   <div class="element">
    <div class="element-image"><img src="https://78.media.tumblr.com/60644bc9e0cfc40c5b3a9c8ad41ba858/tumblr_oypaxwiCbH1qhttpto1_1280.jpg" alt=""></div>
    <div class="element-text" style="background-color: #18B0B2;">
      Дизайн и проектирование сайта от коллектива дизайнеров из Красноярска для системы управления грузовыми перевозками
    </div>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

body {
  font-family: 'Montserrat', sans-serif;
}

.content {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.element {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
 
}

.element-image {
  width: 40%;
  overflow: hidden;
}

.element-text {
  width: 60%;
  padding: 30px;
  font-size: 14px;
  line-height: 22px;
}

.element.active {
  animation: slide 1s ease;
  z-index: 2;
}

.element.preactive {
  z-index: 1;
}

@keyframes slide {
  0% {
    -webkit-clip-path: circle(0% at 100% 50%);
    clip-path: circle(0% at 100% 50%);
  }
  100% {
    -webkit-clip-path: circle(1000px at 80% 50%);
    clip-path: circle(1000px at 80% 50%);
  }
}

JavaScript

var index = 0;
var slide = $('.element');
var len = slide.length;

var timer = setInterval(func_slide, 2000);

function func_slide() {
	index++;
  if (index > len-1) index = 0;
  slide.removeClass('active').eq(index).addClass('active');
  slide.removeClass('preactive').eq(index-1).addClass('preactive');
}

slide.on('mouseenter', function(){
	if (timer) clearInterval(timer);
})

slide.on('mouseleave', function(){
	if (timer) clearInterval(timer);
	timer = setInterval(func_slide, 2000)
});