WONDERS
We organise dream holidays to breathtaking places all over the world. Choose from our special destinations or suggest your own
<script>
	$(".t280__menu__item ").each(function(){
		let text = $(this).html();
		text = text.split("");
		text = "<span>" + text.join("</span><span>") + "</span>";
		$(this).html(text)	
	})
	$(".t280__menu__item").append("<img class='arrow'>");
    // 	заменить id блока с стрелкой
	var arrow_img = $("#rec110364127 img").attr("src");
	var arrow_width = $("#rec110364127 .t396__elem").width();

	$(".arrow").attr("src", arrow_img);
	$(".arrow").width(arrow_width + "px");

	$(".t280__menu").css("padding-left", (arrow_width / 2) + "px");


	$(".t280__menu__item").hover(function(){
		$(".t280__menu__item").addClass("other")
		$(this).removeClass("other")
	}, function(){
		$(".t280__menu__item").removeClass("other")
	})
</script>

<style>
    /*заменить id блока с стрелкой*/
    #rec110364127 {
        display: none !important;
    }
	@media (min-width: 800px) {
		.t280__menu {
			max-width: 800px !important;
		}
	}

	.t280__menu {
	}

	.t280__menu__item {
		perspective: 300px;
	    display: flex;
	    flex-flow: row wrap;
	    justify-content: center;
	    align-items: center;
	    transition: all 1s;
	}
	.t280__menu__item:hover {
		transform: translateX(-15px);
	    transition: all .6;
	}
	.t280__menu__item span {
		transition: all .6s ease-in-out;
		display: inline-block;
		transform: translateZ(-50px);
		min-width: 0.23em;
	}
	.t280__menu__item:hover span {
		transform: translateZ(-50px) rotateY(180deg);
	}
	.arrow {
		display: inline-block;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		opacity: 0;
		transform: translateX(50px);
		transition: all .6s;
	}
	.t280__menu__item:hover .arrow {
		opacity: 1;
		transform: translateX(15px);
	}
	.t280__menu__item.other {
		opacity: .2;
		transform: translateZ(-50px);
	}
</style>
Made on
Tilda