Categories
CSS Web development

CSS Zoom on Hover

CSS Zoom on Hover

Demo:

To create the CSS Zoom on Hover effect follow the steps below:

Hover over the square to see the effect:



Step1.

Add HTML

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

Step2.

Add CSS

.square {
  background-color: #2a9d8f;
  transition: transform .2s;
  width: 100px;
  height: 100px;  
}

.square:hover {
  transform: scale(1.4); 
}

Enjoy coding!

Categories
CSS HTML Web development

How to change the text on Hover?

How to change the text on Hover?

To learn how to create the text change on hover using HTML and CSS follow the steps below:

Demo (hover over the text):

Some text…

Step1.

Add HTML

<div class="example"><span>Some text...</span></div>

Step2.

Add CSS

.example:hover:before {
  content:"Text changed!";
}

.example:hover span {
  display: none;
}

Enjoy coding!

Categories
CSS Web development

CSS :hover and :active selectors

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 selecting 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 changing 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.

Enjoy coding!

Categories
CSS Web development

CSS Door Animation (Open/Close on Hover)

CSS Door Open Close Animation

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:

  1. Add HTML
  2. 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!

Categories
CSS Web development

CSS Flip Postcard

CSS Postcard

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:

  1. Add HTML
  2. 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 back-side 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!

Categories
CSS Web development

CSS Envelope (Open/Close on Hover)

CSS Envelope

Demo:

*to see the animation on the website click here.

To create the CSS Envelope (Open/ Close on Hover) follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="envelope">
  <div class="back"></div>
  <div class="letter">
    <div class="text">Invitation</div>
  </div>
  <div class="front"></div>
  <div class="top"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and position of the background and elements:

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

.envelope {
  position: relative;
  cursor: pointer;
}

Style the card and envelope:

.back {
  position: relative;
  width:250px;
  height: 200px;
  background-color: #6247aa;
}

.letter {
  position: absolute;
  background-color: #fff;
  width:230px;
  height: 180px;
  top:10px;
  left:10px;
  transition: .2s;
}

.letter:before {
  position: absolute;
  content:"";
  background-color: #333;
  width: 80px;
  height: 80px;
  top:75px;
  left:75px;
}

.letter:after {
  position: absolute;
  content:"";
  width:30px;
  height:30px;
  background-color: #fff;
  top:82px;
  left: 82px;
  box-shadow: 36px 0 #fff, 36px 36px #fff, 0px 36px #fff;
}

.text {
  text-align: center;
  font-size: 17px;
  font-family: arial;
  margin-top:20px;
  font-weight: bold;
}

.text:before, .text:after {
  content:"";
  position: absolute;
  width: 5px;
  border-radius:10px;
  background-color: #333;
  height: 20px;
  top:60px;
}

.text:before {
  left:108px;
  transform: rotate(-25deg);
}

.text:after {
  left:118px;
  transform: rotate(25deg);
}

.front {
  position: absolute;
  border-right: 130px solid #815ac0;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  height:0;
  width:0;
  top:0;
  left:120px;
  z-index:3;
}

.front:before {
  content:"";
  position: absolute;
  border-left: 130px solid #815ac0;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  height:0;
  width:0;
  top:-100px;
  left:-120px;
}

.front:after {
  content:"";
  position: absolute;
  border-bottom: 105px solid #7251b5;
  border-left: 125px solid transparent;
  border-right:125px solid transparent;
  height:0;
  width:0;
  top:-5px;
  left:-120px;
}

.top {
  position: absolute;
  border-top: 105px solid #9163cb;
  border-left: 125px solid transparent;
  border-right:125px solid transparent;
  height:0;
  width:0;
  top:0;
  transform-origin: top;
  transition: .4s;
}
.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  width:250px;
  height:10px;
  top:220px;
  border-radius:50%;
}

Add transition on hover:

.envelope:hover .top {
  transform: rotateX(160deg);
}

.envelope:hover .letter {
  transform: translateY(-100px);
  z-index:2;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Valentine’s Day Card

CSS Folded Birthday Card

CSS Flip Postcard

Categories
CSS Web development

CSS EASTER EGG ANIMATION/ CSS Hover Transition

CSS Easter Animation

Demo:

*to see the CSS transition on the website click here.

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

Step1.

Add HTML

<div class="container">
  <div class="easter">
  <div class="egg">
    <div class="yolk"></div>
  </div>
  <div class="shellBottom">
    <div class="bottom"></div>
  </div>
    <div class="shellTop">
      <div class="hoverMe">Hover Me</div>
      <div class="top"></div>
    </div>
    <div class="shadow"></div>
    <div class="text">Happy Easter!</div>
  </div>
</div>

Step2.

Add CSS

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

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

.container {
  position: relative;
}

.easter {
  position: relative;
  left:-100px;
  top:-100px;
}

Style the egg:

.egg {
  position: absolute;
  width: 136px;
  height: 190px;
  background-color: #fffffc;
  border-radius: 50% 60% 50% 50% / 70% 70% 40% 40%;
  box-shadow: inset -5px -7px rgba(0,0,0,0.1);
  z-index:1;
  top:0;
}

.yolk {
  position: absolute;
  content:"";
  width: 90px;
  height:90px;
  background-color: #ffb703;
  border-radius:50%;
  top:65px;
  left:20px;
  box-shadow: inset -5px -5px rgba(0,0,0,0.1);
}

.yolk:before {
  position: absolute;
  content:"";
  background-color: #333;
  width:7px;
  height:10px;
  border-radius:50%;
  top:35px;
  left:30px;
  box-shadow: 20px 0 #333;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2.5s infinite;
}
.yolk:after {
  content:"";
  position: absolute;
  background-color: #fff;
  width:20px;
  height:10px;
  border-radius: 0 0 30px 30px;
  top:50px;
  left:34px;
}
CSS Egg

Add the blink animation to the egg’s eyes:

@-webkit-keyframes blink {
    0%, 100% {
        transform: scale(1, .05);
    }
    5%,
    95% {
        transform: scale(1, 1);
    }
}

Style the shell:

.shellBottom {
  background-color: #a2d2ff;
  position: absolute;
  z-index:3;
  width:150px;
  height:77.5px;
  border-radius: 0 0 100px 100px;
  left:-10px;
  top:150px;
  box-shadow: inset -5px -5px rgba(0,0,0,0.1);
}

.shellBottom:before {
  position: absolute;
  content:"";
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  top:-30px;  
}

.shellBottom:after {
  position: absolute;
  content:"";
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-30px;
  left:25px;
}

.bottom {
  position: absolute;
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-30px;
  left:75px;
}

.bottom:before {
  content:"";
  position: absolute;
  border-bottom: 30px solid #a2d2ff;
  border-left: 25px solid transparent;
  left:25px;
}

.bottom:after {
  content:"";
  position: absolute;
  height:30px;
  width:5px;
  background-color: rgba(0,0,0,0.1);
  left:45px;
}

.shellTop {
  position: absolute;
  background-color: #a2d2ff;
  box-shadow: inset -5px 0 rgba(0,0,0,0.1);
  width:150px;
  height:140px;
  border-radius: 50% 50% 0 0/60% 60% 0 0;
  top:-20px;
  left:-10px;
  z-index:2;
  transition: ease 1s;
}

.shellTop:before, .shellTop:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:140px;
}

.shellTop:after {
  left:50px;
}

.top {
  position: absolute;
  height:0;
  width:0;
  border-top: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:140px;
  left:100px;
}

.hoverMe {
  position: absolute;
  font-family:arial black;
  top:60px;
  left:35px;
  color: #bde0fe;
}
CSS Easter Egg Animation

Add transition on hover:

.shellTop:hover {
  top:-80px;
}

Style the shadow:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  width:170px;
  height:20px;
  border-radius:50%;
  top:212px;
  left:48px;
}
CSS Easter Egg

Add the Easter wishes:

.text {
  position: relative;
  left:-250px;
  font-size:20px;
  font-family: arial black;
  top:100px;
  visibility:hidden;
}

.text:before {
  content:"";
  position: absolute;
  width: 200px;
  height:100px;
  border-radius:30px;
  background-color: #fff;
  left:-25px;
  top:-35px;
  z-index:-1;
}

.text:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top: 20px solid #fff;
  border-right:35px solid transparent;
  top: 20px;
  left:170px;
}

Add transition on hover to make the wishes visible:

.container:hover .text {
  visibility:visible;
  transition-delay:.2s;
}

To see the CSS Easter Animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!