To better display your titles, you should use various effects and styles to make the titles more visible to your website visitors. In this post, we have prepared one of these effects. This effect puts a light blue background as a slider under the text during the hover and when the user hovers the mouse over the title. Removing the mouse from the text also removes the background.
HTML
<!-- This script got from www.devanswer.com -->
<h1>Developer Answers</h1><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
h1::before {
transform: scaleX(0);
transform-origin: bottom right;
}
h1:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
h1::before {
content: " ";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: hsl(200 100% 80%);
z-index: -1;
transition: transform .3s ease;
}
h1 {
position: relative;
font-size: 2rem;
}
html {
block-size: 100%;
inline-size: 100%;
}
body {
place-content: center;
text-align:center;
font-family: system-ui, sans-serif;
}
/*@media (orientation: landscape) {
body {
grid-auto-flow: column;
}
}*/
