Looking to create a hover effect in an CMS platform that only allows internal CSS styling. Despite the absence of a head tag, this CMS recognizes style tags and automatically inserts them into the template.
After attempting to export as HTML to troubleshoot the issue without success, I experimented with hierarchy by setting the default state as H1 and the hover state as a div class and ID. This solution is intended for use on EKTRON CMS functioning on HTML5 without the ability to implement JavaScript.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
h1 {
margin: 0;
padding: 0;
}
h1 span {
display: inline-flex;
color: #1C7CB3;
}
h1 span:nth-child(even) {
overflow: hidden;
transition: ease 0.5s;
color: purple;
letter-spacing: -1em;
}
h1:hover span:nth-last-child(even) {
letter-spacing: 0;
}<h1>
<span>F</span><span>lorida</span>
<span>I</span><span>nstitute</span>
<span></span><span>of</span>
<span>E</span><span>ducation</span>
</h1>My expectation was for the text to animate upon hovering, however, it remains static.