Bringing Web Pages to Life: Mastering CSS Transitions and Effects

Introduction to CSS Interactivity

Welcome! Today, we're set to delve into a component of the CSS realm that brings your web pages to life: Effects and Interactivity. CSS provides a palette of properties like hover, transition, transform, and more, that can be applied to HTML elements to enhance user interactivity. This lesson aims to explore these CSS properties that help us create dynamic and engaging web pages without the need for any additional JavaScript. Unlike traditional static web pages, interactive web pages provide a better user experience, keeping users engaged with visual feedback, animation-like behaviors, and more intuitive interfaces. So, ready to dive in and jazz up your web pages with CSS interactivity? Let's get started!

Hover Effect

The hover effect changes an element's appearance when you hover your cursor over it. This effect is achieved using the :hover pseudo-class. Here's an illustrative example: HTML <!DOCTYPE html> <html> <head> <style> /* When hovered over, div becomes yellow */ div:hover {background-color: yellow;} </style> </head> <body> <!-- The following div changes color when you hover over it --> <div>Hover over me!</div> </body> </html> <!DOCTYPE html> <html> <head> <style> /* When hovered over, div becomes yellow */ div:hover {background-color: yellow;} </style> </head> <body> <!-- The following div changes color when you hover over it --> <div>Hover over me!</div> </body> </html>

Transition and Transform Effects

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

HTML

<!DOCTYPE html>
<html>
<head>
<style>
/* When hovered over, div becomes yellow */
div:hover {
  background-color: yellow;
}
</style>
</head>
<body>

<!-- The following div changes color when you hover over it -->
<div>Hover over me!</div>

</body>
</html>

HTML

<style>
div {
  width: 100px;
  height: 100px;
  background: red;

  /* defining a transition on the transform property */
  transition-property: transform;

  /* the transition is over a period of 2 seconds */
  transition-duration: 2s;

  /* the speed of transition starts slow, ends fast */
  transition-timing-function: ease-in;
}

div:hover {
  /* When hovered over, the div rotates 180 degrees */
  transform: rotate(180deg);
}
</style>
<body>
<div></div>
</body>

CSS

transition: property duration timing-function;

transition: property duration timing-function;

HTML

<style>
div {
  width: 100px;
  height: 100px;
  background: red;

  /* Use the transition shorthand property */
  transition: transform 2s ease-in;
}

div:hover {
  transform: rotate(180deg);  /* The div will rotate 180 degrees */
}
</style>
<body>
<div></div>
</body>

<style>
div {
  width: 100px;
  height: 100px;
  background: red;

  /* Use the transition shorthand property */
  transition: transform 2s ease-in;
}

div:hover {
  transform: rotate(180deg);  /* The div will rotate 180 degrees */
}
</style>
<body>
<div></div>
</body>

HTML

<style>
div {
  width: 100px;
  height: 100px;
  background: red;
}

div:hover {
  width: 200px;
  /* Set the transition property under :hover */
  transition: width 2s;
}

div:active {
  width: 300px;
  /* Transition is not specified under :active, so no transition will occur */
}
</style>
<body>
<div>Click and hold, or hover over me.</div>
</body>
</html>

<style>
div {
  width: 100px;
  height: 100px;
  background: red;
}

div:hover {
  width: 200px;
  /* Set the transition property under :hover */
  transition: width 2s;
}

div:active {
  width: 300px;
  /* Transition is not specified under :active, so no transition will occur */
}
</style>
<body>
<div>Click and hold, or hover over me.</div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<head>
<style>
div {
  /* The element is initially invisible */
  opacity: 0;
  /* The element will slowly become visible over 2 seconds */
  transition: opacity 2s;
}

div:hover {
  /* The element is visible when hovered over */
  opacity: 1;
}
</style>
</head>
<body>
<!-- A piece of text that becomes readable only when hovered -->
<div>This is my fading text.</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
div {
  /* The element is initially invisible */
  opacity: 0;
  /* The element will slowly become visible over 2 seconds */
  transition: opacity 2s;
}

div:hover {
  /* The element is visible when hovered over */
  opacity: 1;
}
</style>
</head>
<body>
<!-- A piece of text that becomes readable only when hovered -->
<div>This is my fading text.</div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<body>

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

<style>
/* Form fields highlight yellow when active */
input:focus {
  background-color: yellow;
}
</style>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

<style>
/* Form fields highlight yellow when active */
input:focus {
  background-color: yellow;
}
</style>

</body>
</html>

HTML

<style>
/* When a text field is active, its border turns blue. */
input[type=text]:focus {
  border: 3px solid blue;
}
</style>

<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
</form>

<style>
/* When a text field is active, its border turns blue. */
input[type=text]:focus {
  border: 3px solid blue;
}
</style>

<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
</form>

CSS

transition: property duration timing-function;

HTML

<style>
div {
  width: 100px;
  height: 100px;
  background: red;

  /* Use the transition shorthand property */
  transition: transform 2s ease-in;
}

div:hover {
  transform: rotate(180deg);  /* The div will rotate 180 degrees */
}
</style>
<body>
<div></div>
</body>

HTML

<style>
div {
  width: 100px;
  height: 100px;
  background: red;
}

div:hover {
  width: 200px;
  /* Set the transition property under :hover */
  transition: width 2s;
}

div:active {
  width: 300px;
  /* Transition is not specified under :active, so no transition will occur */
}
</style>
<body>
<div>Click and hold, or hover over me.</div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<head>
<style>
div {
  /* The element is initially invisible */
  opacity: 0;
  /* The element will slowly become visible over 2 seconds */
  transition: opacity 2s;
}

div:hover {
  /* The element is visible when hovered over */
  opacity: 1;
}
</style>
</head>
<body>
<!-- A piece of text that becomes readable only when hovered -->
<div>This is my fading text.</div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<body>

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

<style>
/* Form fields highlight yellow when active */
input:focus {
  background-color: yellow;
}
</style>

</body>
</html>

HTML

<style>
/* When a text field is active, its border turns blue. */
input[type=text]:focus {
  border: 3px solid blue;
}
</style>

<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
</form>