JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child">
      <h1>Hey</h1>
      <p>This is some content</p>
      <img src="http://lorempixel.com/100/80"/>
    </div>
</div>

CSS

body {
                text-align: center;
                padding-top: 5rem;
            }
            .parent {
                display: inline-block;
                position: relative;
            }
            .parent::before {                
                content: '';
                background: #fab;
                
                /* positioning / sizing */
                position: absolute;
                left:0;
                top:0;                                
                
                /* 
                    be aware that the parent class have to be "position: relative"
                    in order to get the width/height's 100% working for the parent's width/height.                
                */
                width: 100%;
                height: 100%;
                
                /* z-index is important to get the pseudo element to the background (behind the content of parent)! */
                z-index: -1;
                transition: .5s ease;
                /* transform before hovering */
                transform: rotate(30deg) scale(1.5);
            }
            
            .parent:hover::before {
                /* transform after hovering */
                transform: rotate(90deg) scale(1);
            }