JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text1">

    <a href="#" style="text-decoration: none"><img id=house src="house.jpg" width="200" height="150" >
    <h2>house</h2>
    <p>text</p></a>
    <p>texting</p>
    <p>txt</p>

</div>

CSS

.text1 img{
float:right;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
        }

#house.enlarged {
    float:left;
    position: relative;
    display: inline-block;
    height: 100%;
    left:50%;
    transform:scale(4);
}

JavaScript

var house = document.getElementById("house");
house.onclick = function() {
    this.className = "enlarged";
};