JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

	<!--Rotated Text-->
 	<p class="right">Harolds</p>
 	<p class="left">Harolds</p>
	<!--//Rotated Text-->

 	<h2 class="hdr-left hdr-color" id="lorem">Lorem</h2>

 	<div class="image-container" id="imgContainer">
		<img src="http://via.placeholder.com/980x550" alt="gucci" class="image">
 		<!--colour overlay-->
 		<div class="overlay"></div>
	 	<!--//colour overlay-->
 	</div>

 	<h2 class="hdr-right hdr-color" id="ipsum">Ipsum</h2>

 </div>

CSS

body {
			max-width: 100%;
			overflow-x: hidden;
			background: yellow;
			font-family: sans-serif;
		}

		.container {
			width: 85%;
			max-width: 700px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		img {
			width: 100%;
			max-width: 920px;
			
		}


		p {
			font-size: 18px;
			color: blue;
			font-weight: bold
		}

		p.left {
			position: absolute;
			top: 0;
			bottom: 0px;
			right: -32%;
			transform: rotate(-90deg);
		}

		p.right {
			position: absolute;
			top: 0;
			bottom: 0;
			left: -32%;
			transform: rotate(90deg);
		}

		h2 {
			font-size: 5em;
			position: absolute;
			text-transform: uppercase;
			letter-spacing: 2px;
			font-weight: bold;
			margin: 0;
			z-index: 5;
			color: blue;
			transition: all 0.5s ease-in-out;
		}

		.hdr-color-white {
			color: white;
		}

		.hdr-left {
			left: -12%;
			top: -35%;
		}

		.hdr-left-middle {
			left: 7%;
			top: 40%;
		}

		.hdr-right {
			right: -10%;
			top: 110%;
		}

		.hdr-right-middle {
			right: 7%;
			top: 40%;
		}

		/*Hovers*/

		.container:hover {
			cursor: pointer
		}

		.container:hover>p {
			color: red;
		}

		.container .image-container:hover {
			
		}

		/*Hovers Ends*/

		/*Overlay*/
		.image-container {
			position: relative;
			width: 100%;
			padding:10px;
			box-sizing: border-box;
			
		}

		.image {
			display: block;
			width: 100%;
			height: auto;
			outline:5px solid blue;
		}

		.container .image-container:hover >.image {
			outline:none;
		}

		.overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 1;
      transition: .5s ease;
      background-color: transparent;
      border: 10px solid transparent;
      box-sizing: border-box;
		}

		.image-container:hover .overlay {
      background-color: rgba(255, 0, 0, 0.3);
      border: 10px solid green;
		}
		/*Overlay  Ends*/

JavaScript

var imgContainer = document.getElementById("imgContainer");
var lorem = document.querySelector(".hdr-left");
var ipsum = document.querySelector(".hdr-right");

//When clicking on imgContainer toggle between class to change colour and position
imgContainer.addEventListener('click', function() {
	lorem.classList.toggle("hdr-color-white");
	ipsum.classList.toggle("hdr-color-white");
	lorem.classList.toggle('hdr-left-middle');
	ipsum.classList.toggle('hdr-right-middle');
});