Tag: transitions

CSS :hover and :active selectors

Post author By Lena Stanley
Post date May 22, 2021

The CSS selectors select the HTML elements which you want to style.

CSS :hover and :active selectors — *to see the demo and the code of the animation above click here.

The CSS :hover selector is used to select the element when you mouse over it.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
	
.square {
	width:100px;
	height: 100px;
	background-color: #2a9d8f;
	}
.square:hover {
  background-color: #e9c46a;
}
</style>
</head>
<body>

<p>Hover over the square:</p>
<div class="square"></div>

</body>
</html>

Output:

Hover over the square:

To make the change of the selected element smoother you can add to the :hover selector the transition property.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
	
.square {
	width:100px;
	height: 100px;
	background-color: #2a9d8f;
	transition: .5s;
	}
.square:hover {
  background-color: #e9c46a;
}
</style>
</head>
<body>

<p>Hover over the square:</p>
<div class="square"></div>

</body>
</html>

Output:

Hover over the square:

The CSS :active selector is used to change the appearance of a link /HTML element while it is being activated (being clicked).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
	
.square {
	width:100px;
	height: 100px;
	background-color: #2a9d8f;
	}
.square:active {
  background-color: #e9c46a;
}
</style>
</head>
<body>

<p>Hover over the square:</p>
<div class="square"></div>

</body>
</html>

Output:

Click on the square:

Using the CSS :hover and :active selectors you can style links with different styles:

<!DOCTYPE html>
<html>
<head>
<style>
	
p {color: #333; font-size: 20px;font-family: arial;}
	
a.link-1:hover, a.link-1:active {color: #2a9d8f;}
a.link-2:hover, a.link-2:active {font-size: 35px;}
a.link-3:hover, a.link-3:active {background-color: #2a9d8f;}
a.link-4:hover, a.link-4:active {font-family: 'Brush Script MT', cursive;}
a.link-5:visited, a.link-5:link {text-decoration: none;}
a.link-5:hover, a.link-5:active {text-decoration: underline;}
</style>
</head>
<body>

<p>Hover over the links to see effects.</p>

<p><a class="link-1" href="">This link changes color</a></p>
<p><a class="link-2" href="">This link changes font-size</a></p>
<p><a class="link-3" href="">This link changes background-color</a></p>
<p><a class="link-4" href="">This link changes font-family</a></p>
<p><a class="link-5" href="">This link changes text-decoration</a></p>

</body>
</html>

Output:

Hover over the links to see effects.

This link changes color.

This link changes font-size.

This link changes background-color.

This link changes font-family.

This link changes text-decoration.

Enjoy coding!

CSS Transition

Post author By Lena Stanley
Post date May 21, 2021

The CSS transition property allows elements to change values over a given duration.

The CSS transition property is shorthand of the following properties:

transition-property

transition-delay

transition-duration

transition-timing-function

Example1:

The transition effect will start when the specified CSS property (width) changes the value. When the cursor moves out of the element, it will gradually change back to its original width.

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  transition: width 1s;
}

.square:hover {
  width: 200px;
}
</style>
</head>
<body>

<p>Hover over the square:</p>
<div class="square"></div>

</body>
</html>

Output:

Hover over the square:

Using the CSS transitions you can change several property values at the same time:

Example2:

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  transition: width 1s, height 2s, background-color .5s;
}

.square:hover {
  width: 200px;
  height: 200px;
  background-color: #e9c46a;
}
</style>
</head>
<body>

<p>Hover over the square:</p>

<div class="square"></div>

</body>
</html>

Output:

Hover over the square:

Example3.

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  transition: width 1s, height 1s, transform 1s, background-color 1s;
}

.square:hover {
  width: 200px;
  height: 200px;
  transform: rotate(360deg);
  background-color: #e76f51;
}
</style>
</head>
<body>

<p>Hover over the square below:</p>

<div class="square"></div>

</body>
</html>

Output:

Hover over the square below:

To specify the speed curve of the transition effect you can use the transition-timing-function property.

The transition-timing-function property can have the following values:

ease (default) – the transition starts slowly, then fast, then ends slowly again.

linear – the transition has the same speed from start to end.

ease-in – the transition starts slowly.

ease-out – the transition end slowly.

ease-in-out – the transition has a slow start and end.

cubic-bezier – allows you to define your own values (n,n,n,n).

The transition-delay property specifies a delay of the transition effect. The transition-delay property is defined by seconds.

Example (2 seconds delay before starting:)

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  transition: width 2s;
  transition-delay: 2s;
}

.square:hover {
  width: 200px;
}
</style>
</head>
<body>

<p>Hover over the square:</p>
<div class="square"></div>

</body>
</html>

Output:

Hover over the square:

Note: The transition effect has a 2 seconds delay before starting.

Enjoy coding!

CSS Text Change on Hover

Post author By Lena Stanley
Post date May 19, 2021

Demo:

*to see the CSS Text Change Animation on the website click here.

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?

CSS Parallax Scrolling Effect

CSS Toggle Switch

Tags CSS, text, transitions

Web development

CSS Umbrella (Open/Close on Click)

Post author By Lena Stanley
Post date April 28, 2021

Demo:

*to see the animation on the website click here.

To create the CSS Umbrella Animation follow the steps below and watch the video tutorial:

Add HTML
Add CSS

Step1.

Add HTML

<div class="rainyDay">
  <div class="umbrella">
      <input id='panel' type='checkbox'>
    <label class='panel' for='panel'></label>
    <div class="stick"></div>
  </div>
  <div class="rain">
    <div class="dropletOne"></div>
    <div class="dropletTwo"></div>
    <div class="dropletThree"></div>
    <div class="dropletFour"></div>
    <div class="dropletFive"></div>
  </div>
</div>

Step2.

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
  background-color: #5c677d;
}

.rainyDay {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius:50%;
  overflow: hidden;
  background-color: #33415c;
}

.umbrella {
  position: relative;
  top:200px;
  left:200px;
}

Style the umbrella:

.panel {
  position: absolute;
  background-color: #333;
  width:5px;
  height:120px;
  top:-50px;
  z-index:3;
}

.panel:before {
  content:"";
  position: absolute;
  top:20px;
  left:-97px;
  width:200px;
  height: 350px;
  background-color: #161a1d;
  opacity:0.1;
  transition: .2s ease;
}

.panel:after {
  content:"";
  position: absolute;
  cursor: pointer;
  width: 200px;
  height:100px;
  border-radius: 100px 100px 0 0;
  background-color: #a4161a;
  box-shadow: inset 0 -10px #333, inset 50px -10px #ba181b, inset -50px -10px #ba181b;
  top:-75px;
  left:-97px;
  transition: .2s ease;
  transform-origin: top;
}
.stick {
  position: absolute;
  background-color: #333;
  width:5px;
  height:20px;
  border-radius: 20px 20px 0 0;
  top:-143px;
  left:0.5;
  z-index:5;
}

.stick:before {
  content:"";
  position: absolute;
  border-right: 7px solid #b1a7a6;
  border-bottom: 7px solid #b1a7a6;
  border-left:7px solid transparent;
  border-top:7px solid transparent;
  width:20px;
  height:20px;
  border-radius:50%;
  top:190px;
  left:-1px;
  transform: rotate(45deg);
}

.stick:after {
  content:"";
  position: absolute;
  width:7px;
  height:15px;
  background-color: #b1a7a6;
  top:195px;
  left:-1px;
}

Open/ Close the umbrella:

input#panel {
  display: none;
}

#panel:checked ~ .panel:after {
  transform: scaleX(0.2) scaleY(1.5);
}

#panel:checked + .panel:before {
  transform: scaleX(0.000001);
  opacity:0;
}

Add some droplets:

.rain {
  position: absolute;
}

.dropletOne, .dropletTwo, .dropletThree, .dropletFour, .dropletFive {
  position: absolute;
  width:15px;
  height: 15px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  background-color: #979dac;
  top:-20px;
  left:150px;
  transform: rotate(-45deg);
  box-shadow: -80px -100px #979dac, 80px 150px #979dac;
  animation: rain 4s linear infinite;
}

.dropletTwo {
  top:-30px;
  left:200px;
  animation: rain 4s linear infinite 1s;
}

.dropletThree {
  top:-70px;
  left:100px;
  animation: rain 4s linear infinite 2s;
}

.dropletFour {
  top:-70px;
  left:50px;
  animation: rain 4s linear infinite 2.5s;
}

.dropletFive {
  top:-90px;
  left:10px;
  animation: rain 4s linear infinite 3s;
}

Animate droplets:

@keyframes rain {
  0% {transform: translateY(-20px) rotate(-45deg);}
  100% {transform: translateY(450px) rotate(-45deg);}
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Desk Lamp (Switch On/ Off)

CSS Bubble Animation

CSS Toggle Switch

Tags checkbox, CSS, transitions, umbrella

Web development

CSS Door Animation (Open/Close on Hover)

Post author By Lena Stanley
Post date April 26, 2021

Demo:

*to see the CSS Door Animation on the website click here.

T0 create the CSS Door Animation follow the steps below and watch the video tutorial:

Add HTML
Add CSS

Step1.

Add HTML

<div class="door">
  <div class="door-front">
    <div class="knob"></div>
  </div>
  <div class="door-back">
    <div class="rack"></div>
    <div class="hat"></div>
    <div class="jacket"></div>
  </div>
  <div class="door-mat"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

Style the door:

.door {
  position: relative;
  width: 170px;
  height:270px;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: perspective(2500px);
 
}
.door-front {
  width: 170px;
  height:270px;
  overflow: hidden;
  transform-origin: left;
  box-shadow: 30px 0 50px rgba(0,0,0,0.2);
  position: absolute;
  background-color: #924500;
  z-index:1;
  transition: .5s;
}

.door-front:before, .door-front:after {
  content:"";
  position: absolute;
  background-color: #924500;
  width: 105px;
  height: 75px;
  border: 10px ridge #b05500;
  left:22.5px;
}

.door-front:before {
  top:25px;
}

.door-front:after {
  top:155px;
}
.knob {
  position: absolute;
  width: 20px;
  height:30px;
  background-color: #eeba0b;
  top:122px;
  left:145px;
  border-radius:2px;
}

.knob:before {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: #f1c83c;
  width:18px;
  height:18px;
  left:-1px;
  box-shadow: 2px 2px rgba(0,0,0,0.2);
}

.knob:after {
  content:"";
  position: absolute;
  width:4px;
  height:7px;
  background-color: #333;
  top:20px;
  left:8.5px;
}

Add the other side of the door:

.door-back {
  position: relative;
  background: linear-gradient(0deg, rgba(193,124,116,1) 13%, rgba(73,88,103,1) 13%, rgba(79,100,124,1) 15%, rgba(87,115,153,1) 15%);
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 10px solid #edf2f4;
}

.rack {
  position: absolute;
  width: 7px;
  height:150px;
  background-color: #a78a7f;
  top:90px;
  left:100px;
}

.rack:before {
  content:"";
  position: absolute;
  width:70px;
  height:10px;
  border-radius: 30px 30px 0 0;
  background-color: #8c1c13;
  top:150px;
  left:-30px;
}

.rack:after {
  position: absolute;
  content:"";
  width:30px;
  height: 30px;
  border-bottom: 5px solid #a78a7f;
  border-right: 5px solid #a78a7f;
  border-bottom-right-radius:100%;
  top:20px;
}

.hat {
  position: absolute;
  width: 60px;
  height: 15px;
  border-radius:20px 20px 0 0; 
  background-color: #bf4342;
  top:80px;
  left:75px;
}

.hat:before {
  content:"";
  position: absolute;
  width: 40px;
  height: 20px;
  border-radius:10px 10px 0 0; 
  background-color: #bf4342;
  top:-20px;
  left:10px;
  box-shadow: inset 0 -5px #e7d7c1;
}

.hat:after {
  content:"";
  position: absolute;
  width: 40px;
  height: 100px;
  background-color: #735751;
  border-radius: 50% 60% 20% 20% / 70% 70% 20% 20%;
  top:20px;
  left:45px;
}

.jacket {
  position: absolute;
  width: 7px;
  height: 7px;
  background-color: #e7d7c1;
  border-radius:50%;
  top:120px;
  left:137px;
  box-shadow: 0 20px #e7d7c1;
}

.jacket:before {
  content:"";
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: #a78a7f;
  left:-10px;
  top:40px;
}

.jacket:after {
  content:"";
  position: absolute;
  border-top: 15px solid #8c1c13;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  width:0;
  height:0;
  top:40px;
  left:-12px;
}

Style the doormat:

.door-mat {
  position: relative;
  perspective: 200px;
}

.door-mat:before {
  content:"";
  position: absolute;
  width: 170px;
  height: 70px;
  background: repeating-linear-gradient(#a8763e, #a8763e 10px,
  #9d741a 10px, #9d741a 20px);
  top:20px;
  outline:5px solid #a8763e;
  transform: rotateX(45deg);
}

Create the flip effect:

.door:hover .door-front {
  transform: rotateY(-160deg); 
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card (Open/ Close on Click)

CSS 3d flip Business Card

CSS Envelope (Open/Close on Hover)

Tags CSS, door, hover, transitions

Web development

CSS Flip Postcard

Post author By Lena Stanley
Post date April 24, 2021

Demo:

*to see the CSS Flip Postcard on the website click here.

To create the CSS Flip Postcard follow the steps below and watch the video tutorial:

Add HTML
Add CSS

Step1.

Add HTML

Create the postcard container, front-side and the back-side of the card:

<div class="post-card">
  <div class="post-card-inner">
    <div class="post-card-front">
      <div class="egypt">
        <div class="sky"></div>
        <div class="pyramids"></div>
        <div class="bottom">
          <div class="text">EGYPT</div>
        </div>
      </div>   
    </div>
    <div class="post-card-back">
      <div class="postCard">POSTCARD</div>
      <div class="address">
        <p class="name">John Doe</p>
        <p class="street">123 Oxford Street</p>
        <p class="city">123, London</p>
        <p class="country">United Kingdom</p>
      </div>
      <p class="greetings">Dear John,</br></br>
  WISH YOU </br>WERE HERE!</br>Lena, xxx </p>
      </div>    
    </div>
  </div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Create the flip effect:

.post-card {
  background-color: transparent;
  width: 400px;
  height: 300px;
  perspective: 1000px;
}

.post-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), 10px 18px 20px rgba(0,0,0,0.2);
}

.post-card:hover .post-card-inner {
  transform: rotateY(180deg);
}

.post-card-front, .post-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.post-card-front {
  background-color: #e9c46a;
  border: 10px solid #fff;
}
.post-card-back {
  background-color: #faedcd;
  border: 10px solid #faedcd;
  transform: rotateY(180deg);
  overflow: hidden;
}

Style the front side of the card:

.egypt {
  position: absolute;
  overflow:hidden;
  width: 400px;
  height: 300px;
}

.sky {
  position: absolute;
  border-radius:50%;
  background-color: #fefae0;
  width:100px;
  height:100px;
  top:30px;
  left:230px
}

.sky:before {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-left: 390px solid rgba(255,255,255,0.2);
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  left:-230px;
}

.sky:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  border-right: 300px solid rgba(255,255,255,0.2);
  top:70px;
  left:-170px;
  transform: skew(45deg);
}

.pyramids {
  position: absolute;
  left:-25px;
  height:0;
  width:0;
  border-bottom: 200px solid #f4a261;
  border-right: 150px solid transparent;
  border-left: 150px solid transparent;
  top:90px;
}

.piramids:before {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-bottom: 200px solid rgba(0,0,0,0.2);
  border-right: 150px solid transparent;
}

.piramids:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  top:20px;
  border-bottom: 200px solid #e76f51;
  border-right: 150px solid transparent;
  border-left: 150px solid transparent;
}

.bottom {
  position: absolute;
  width: 400px;
  height:50px;
  background-color: #264653;
  top:250px;
}

.text {
  font-size:50px;
  color: white;
}

Style the backside of the card:

.postCard {
  margin-top:30px;
}

.postCard:before {
  content:"";
  position: absolute;
  width:3px;
  height:200px;
  background-color: #333;
  left:200px;
  top:70px;
}

.postCard:after {
  content:"";
  position: absolute;
  height:3px;
  width:150px;
  background-color: #333;
  top:150px;
  left:230px;
  box-shadow: 0 30px #333, 0 60px #333, 0 90px #333;
}

.address {
  position: relative;
  top:0;
}

.address:before {
  content:"";
  position: absolute;
  width: 60px;
  height: 70px;
  border: 5px solid #333;
  outline-style: dashed;
  outline-color: #333;
  background-color: #cb997e;
  top:-40px;
  left:320px;
}

.address:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  border-style: dashed;
  width: 50px;
  height: 50px;
  top:10px;
  left:290px;
}

.name, .street, .city, .country, .greetings {
  font-family: 'Brush Script MT', cursive;
  font-size:20px;
  position: absolute;
}

.name {
  top:60px;
  left: 250px;
}

.street {
  top:90px;
  left: 250px;
}

.city {
  top:120px;
  left: 250px;
}

.country {
  top: 150px;
  left: 250px;
}

.greetings {
  left:40px;
  top:100px;
}

Watch also the video tutorial:

Enjoy coding!