Glass Effect Demo

dabblet.css

/**
 * Glass Effect Demo
 */

* {  box-sizing: border-box;}html,body {  min-height: 100%;  display: flex;  flex-direction: column;  /*align-content: center;*/  justify-content: center;}body {  background: #333;  background: url('//crossorigin.me/http://s20.postimg.org/ok95x8kq5/stone_art_min_jpg_rnd_0_201922501437366.jpg') no-repeat 100% 100%/cover;  font-family: 'georgia';}.glass {  background: rgba(0, 250, 154, .5);  cursor: pointer;  margin: 0 auto;  width: 200px;  height: 200px;  /*border-radius: 1em;*/  border: 1em solid hsla(0, 0%, 100%, .5);  background-clip: padding-box;  padding: 1em;}.glass:hover {  border-radius: 3em 0;  transition: border-radius 1s ease-in-out;  background-clip: content-box;  /*background: transparent;*/}.glass > div {  background-color: hsla(0, 0%, 100%, 1);  border: 1em solid hsla(0, 0%, 100%, .5);  background-clip: content-box;  width: 100%;  height: 100%;  transition: inherit;  opacity: 0.7;  padding: .5em;  display: flex;  align-items: center;  justify-content: center;  font-weight: bold;}.glass > div:hover {  background: rgba(0, 250, 154, .1);  background: url('//crossorigin.me/http://s20.postimage.org/66tvep88d/Abhisek.png') no-repeat top right/100% 100%;  background-clip: content-box;  opacity: 1;  transition: opacity;  transition-duration: 1s;  transition-timing-function: ease-in-out;  border: none;  border-radius: 1em;  color: transparent;}

dabblet.html

<div class="glass"><div>hover me</div></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}