Skip to content

Instantly share code, notes, and snippets.

@sardinecan

sardinecan/index.html

Created May 14, 2019 12:18
Show Gist options
  • Save sardinecan/3984a526d9e930698d1d815c4a2c286f to your computer and use it in GitHub Desktop.
Save sardinecan/3984a526d9e930698d1d815c4a2c286f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/vorizuk
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.delete {
display:flex;
-webkit-mask: url(https://cdn.worldvectorlogo.com/logos/react.svg) 50% 50%;
mask: url(https://cdn.worldvectorlogo.com/logos/react.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
mask-size: cover;
-webkip-mask-mode: alpha;
mask-mode: alpha;
background-color: red;
width: 1em;
height: 1em;
flex-shrink: 0;
z-index: 1;
/*display: inline-block;*/
}
.delete button {
display: none;
/* Position the tooltip text - see examples below! */
}
/* Show the tooltip text when you mouse over the tooltip container */
.delete:hover button {
display: inline-block;
width: auto;
position: inherit;
z-index: 9999;
}
.delete:hover {
-webkit-mask-size:auto;
width:auto;
height: auto;
background-color: transparent;
}
</style>
</head>
<body>
<span class="delete">
<span class="value">
<button>
<span class="label">Hello</span>
</button>
</span>
</span>
<script id="jsbin-source-css" type="text/css">.delete {
display:flex;
-webkit-mask: url(https://cdn.worldvectorlogo.com/logos/react.svg) 50% 50%;
mask: url(https://cdn.worldvectorlogo.com/logos/react.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
mask-size: cover;
-webkip-mask-mode: alpha;
mask-mode: alpha;
background-color: red;
width: 1em;
height: 1em;
flex-shrink: 0;
z-index: 1;
/*display: inline-block;*/
}
.delete button {
display: none;
/* Position the tooltip text - see examples below! */
}
/* Show the tooltip text when you mouse over the tooltip container */
.delete:hover button {
display: inline-block;
width: auto;
position: inherit;
z-index: 9999;
}
.delete:hover {
-webkit-mask-size:auto;
width:auto;
height: auto;
background-color: transparent;
}
</script>
</body>
<!-- https://www.w3schools.com/css/css_tooltip.asp -->
<!-- https://stackoverflow.com/questions/48527987/how-to-make-element-inside-masked-div-fully-visible-tooltip-style -->
</html>
Raw
jsbin.vorizuk.css
.delete {
display:flex;
-webkit-mask: url(https://cdn.worldvectorlogo.com/logos/react.svg) 50% 50%;
mask: url(https://cdn.worldvectorlogo.com/logos/react.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
mask-size: cover;
-webkip-mask-mode: alpha;
mask-mode: alpha;
background-color: red;
width: 1em;
height: 1em;
flex-shrink: 0;
z-index: 1;
/*display: inline-block;*/
}
.delete button {
display: none;
/* Position the tooltip text - see examples below! */
}
/* Show the tooltip text when you mouse over the tooltip container */
.delete:hover button {
display: inline-block;
width: auto;
position: inherit;
z-index: 9999;
}
.delete:hover {
-webkit-mask-size:auto;
width:auto;
height: auto;
background-color: transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment