This example demonstrate stylish golden text glowing with mouse over in blogger post.
Here is the example:
Example
<div class="stage">
<br />
<br />
<section class="a-center">
<h1 class="golden-text h-alpha">
Binary Search</h1>
<br />
<h2 class="golden-text h-beta">
int i = rank(key);</h2>
<br />
<h2 class="golden-text">
recursive vs iterative</h2>
</section>
</div>
<br />
<style>
.stage * {
overflow: visible;
position: relative;
box-sizing: border-box;
}
.golden-text {
background: -webkit-linear-gradient(-80deg, #966d2d, #ecbf40, #fae56b, #ecbf40, #966d2d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
transition: background 0.25s;
}
.golden-text:hover {
background: -webkit-linear-gradient(-80deg, #966d2d, #ecbf40, #fae56b, #ecbf40, #ecbf40, #966d2d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.a-center {
text-align: center;
}
.h-alpha {
font-size: 6rem;
}
.h-beta {
font-size: 3rem;
}
.stage h1, h2, h3 {
margin: 0;
color: #22292c;
line-height: 1.3;
}
::selection {
background: #ecbf40;
}
.stage a {
text-decoration: none;
color: #d31e48;
box-shadow: inset 0 -6px 0 rgba(211, 30, 72, 0.25);
}
.stage a:hover {
box-shadow: inset 0 -1rem 0 rgba(211, 30, 72, 0.125);
}
</style>
<br />
<br />
<section class="a-center">
<h1 class="golden-text h-alpha">
Binary Search</h1>
<br />
<h2 class="golden-text h-beta">
int i = rank(key);</h2>
<br />
<h2 class="golden-text">
recursive vs iterative</h2>
</section>
</div>
<br />
<style>
.stage * {
overflow: visible;
position: relative;
box-sizing: border-box;
}
.golden-text {
background: -webkit-linear-gradient(-80deg, #966d2d, #ecbf40, #fae56b, #ecbf40, #966d2d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
transition: background 0.25s;
}
.golden-text:hover {
background: -webkit-linear-gradient(-80deg, #966d2d, #ecbf40, #fae56b, #ecbf40, #ecbf40, #966d2d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.a-center {
text-align: center;
}
.h-alpha {
font-size: 6rem;
}
.h-beta {
font-size: 3rem;
}
.stage h1, h2, h3 {
margin: 0;
color: #22292c;
line-height: 1.3;
}
::selection {
background: #ecbf40;
}
.stage a {
text-decoration: none;
color: #d31e48;
box-shadow: inset 0 -6px 0 rgba(211, 30, 72, 0.25);
}
.stage a:hover {
box-shadow: inset 0 -1rem 0 rgba(211, 30, 72, 0.125);
}
</style>