JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<h1 class="mask one">Envira Phani</h1>

CSS

body {
  background: #8fca46;
  text-align: center;
  padding: 20px 2%;
}

.mask {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  background:#fff url("https://lh3.googleusercontent.com/-g3qurrKrMS8/AAAAAAAAAAI/AAAAAAAAAHU/e7G2W8069Vc/photo.jpg");
  background-position: 0 -20%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -o-background-clip: text;
  background-clip: text;
  font-size: 11em;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -10px;
  padding: 0 15px;
  
}

.one {  
  color: transparent;
  text-stroke: 5px;
  background-position: 0 -20%;
  transition: all 1.5s ease; 
  filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.one:hover {
  background-position: 30% -20%;
  filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: none; /* IE6-9 */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.two {  
  color: transparent;
  text-stroke: 15px;
  background-position: 0 25%;
  text-shadow: 0 0 15px rgba(221,221,221,0.2);
  transition: text-shadow 0.35s linear;
}
.two:hover {
  text-shadow: 0 0 10px rgba(221,221,221,1), 0 0 0 #ddd;
}