I have been unable to find any other platform where I can seek advice on this particular issue. I am currently working on editing the CSS of a website for a friend who wants the title text to change when hovered over. However, despite my efforts, I have struggled to make the :hover function work for the title. I am torn between completely recoding it, considering it was part of a predefined theme she found, or seeking guidance on how to achieve the desired effect.
The specific request is for the ability to hover over the title, "Veoleth Dathgir," and have it transform into a different word. Unfortunately, my attempts so far have not yielded the desired outcome.
It's worth noting that I do not possess professional experience in this field; my knowledge comes from years of self-taught hobbyist practice. As a learning opportunity, what steps should I take to implement this change? Despite scouring various resources like Google and W3Schools for an hour or two, I have yet to make any significant progress.
You can access the full page code here, with relevant lines included below:
.title {
font-family:'apple chancery',uppercase; /*title font*/
font-size:30px;
padding-top:90px;
text-shadow:0 0 10px rgba(0,0,0,.3);
}
.subheader {
margin-top:10px;
}
.header {
width:550px;
height:200px;
-webkit-transition:ease-in-out .5s;
-moz-transition:ease-in-out .5s;
-o-transition:ease-in-out .5s;
transition:ease-in-out .5s;
text-align:center;
letter-spacing:1px;
color:#271717;
border-bottom:solid #381F1F 20px;
background-color:#423535;
background-image:url();
background-position:center;
background-size:100% auto;
}
.header:hover {
letter-spacing:3px;
text-shadow:0 0 30px rgba(255,255,255,.6);
}
In addition, here are some snippets from the page:
<div class="header">
<div class="title">Veoleth Dathgir</div>
<div class="subheader">Spurned Ghosts</div>
</div>