
Demo:
To create the CSS Text Change on Hover follow the steps below and watch the video tutorial:
- Add HTML
- Add CSS
Step1.
Add HTML
<div class="square">
<div class="text"><span>Hover Me</div>
</div>
Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Create the rectangle:
.square {
position: relative;
width: 250px;
height: 80px;
border: 7px solid #333;
box-shadow: 10px 10px rgba(0,0,0,0.5);
}
.square:before {
position: absolute;
content:"";
width: 0px;
height: 80px;
background-color: #333;
transition: width .5s ease;
}
Style the text:
.text {
position: relative;
font-size:50px;
color: #333;
font-family: Tahoma, sans-serif;
text-align: center;
margin:7px;
}
Add transitions on hover:
.square:hover:before {
width: 250px;
}
.square:hover .text:before {
content:"Thanks!";
color: #fff;
}
.square:hover span {
display: none;
}
Watch also the video tutorial:
Enjoy coding!
Hey, here’s something that might interest you:
How to change the text on Hover?