Follow this guide to learn how to add a transition to a website using the transition
CSS property! This also makes use of the hover
pseudo-class.
The setup for this concept will be a little more involved than other concepts.
class
attribute to the second <p>
element that says “Style this paragraph…”class
to be update
<style></style>
element.update
as the selector{
and }
).update:hover
as the selector{
and }
)At this point, the added code should look something like this:
HTML
<p class="update">Style this paragraph...</p>
CSS
.update {
}
.update:hover {
}
The project should be ready for styling.
First, set some styles that will only apply when you hover over the <p>
element on the website.
<style></style>
element.update:hover
ruleset
<p>
only when someone has their cursor on top of it{
and }
, create a new property declaration with color
color
property to be blue
Load up the page, hover over the paragraph, make sure it turns blue!
The CSS code for this part should look something like this:
.update:hover {
color: blue;
}
Right now, hovering over the paragraph will update it immediately. However, sometimes a smoother transition is desired. That’s where the transition
property comes in handy.
<style></style>
element.update
ruleset{
and }
, create a new property declaration with transition
transition
property to color 1s
Load up the page and hover over the paragraph. Make sure it takes a second for the text color to change to blue!
The CSS code within the <style></style>
element should look something like this:
.update {
transition: color 1s;
}
.update:hover {
color: blue;
}