JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<div class="shiny">    
    <img src="https://sites.google.com/a/lylesgrp.com/test-site/WML%20Small.png">
    <div class="show-off" />
  </div>

CSS

body {
  font-family: Calibri, Helvetica, sans-serif;
  color: #333333;
 }

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.shiny {
  border-radius: 5px;
  width: 270px;
  background:#FFF;
  height: 125px;
  padding: 5px 5px 5px 5px;
  overflow:hidden;
}

.show-off {
  width: 300px;
  height: 605px;
  position: relative;
  top: -556px;
  left: -550px;
  transition: 1s;
  transform: rotate(30deg);
  background: linear-gradient(90deg, rgba(255,255,255, 0)50%, rgba(255,255,255,0.7)100%);
}

.shiny:hover .show-off {
  transform: rotate(0);
  left: 560px;
  top: -445px;
}