CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

Overlay
An overlay is a transparent layer of content that is placed on top of another element. It can be used to create different effects, such as a modal window, a tooltip, or a popover.
The overlay element should be positioned absolutely and have a higher z-index than the content element. This will ensure that the overlay is displayed on top of the content.
To create an overlay using CSS, follow these steps:
Create two div elements one for the overlay itself and one for the content that you want to overlay.
Position the overlay element absolutely on top of the page.
Set the width and height of the overlay element to 100%, so that it covers the entire page.
Set the background-color of the overlay element to a transparent color, such as rgba(0, 0, 0, 0.5). This will make the overlay visible.
Set the z-index of the overlay element to a value higher than the z-index of any other elements on the page. This will ensure that the overlay is always displayed on top of all other elements.
CSS Overlay - Basic Example
The following example shows an overlay effect that appears when you click a button and disappears when you click anywhere on the page.
JavaScript can be used to show and hide the overlay div element by using the querySelector() method to get the overlay element. When the button is clicked, a function is executed that toggles the display property of the overlay container between block (visible) and none (hidden).
<html>
<head>
<style>
   .overlay-container {
      position: fixed;
      display: none;
      width: 100%;
      height: 100%;
      text-align: center;
      background-color: rgba(213, 86, 207, 0.3);
      z-index: 999; 
      cursor: pointer;
   }
   .overlay-content {
      padding: 20px;
   }
   .overlay-button {
      background-color: #38dc29; 
      color: white; 
      border: none;
      padding: 20px;
      cursor: pointer;
      font-size: 20px;
      text-align: center; 
      display: block; 
      margin: 50px auto;  
   }
</style>
</head>
<body>
   <div class="overlay-container" onclick="overlayFun()">
      <h1>Tutrialspoint CSS Overlay</h1>
   </div>
   <div style="padding:20px">
   <button class="overlay-button" onclick="overlayFun()">Click on Button</button>
   </div>
   <script>
      let overlayVisible = false;
      function overlayFun() {
         const overlay = document.querySelector(".overlay-container");
         overlay.style.display = overlayVisible ? "none" : "block";
         overlayVisible = !overlayVisible;
      }
   </script>
</body>
</html>  
CSS Overlay - Top to Bottom Sliding
There are four different ways to create a sliding overlay effect: top, bottom, left, and right. We will discuss each type one by one with an example.
The following example shows an image with an overlay that slides down from the top of the image to the bottom when the user hovers over it 
<html> 
<head> 
<style> 
   .overlay-container img { 
      width: 200px; 
      height: 200px; 
      margin-left: 40%;
   } 
   .overlay-container { 
      position: relative; 
      width: 25%; 
      height: auto;
   }  
   .overlay-container:hover .top-bottom { 
      opacity: 1; 
      height: 200px; 
   } 
   .top-bottom{ 
      position: absolute; 
      transition: 0.9s ease; 
      opacity: 0.3; 
      width: 200px; 
      border-radius: 5px;
      height: 0; 
      top: 0; 
      left: 40%;  
      background-color: #d346e6; 
      text-align: center;
      color: #ffffff;
   }
   h2 {
      text-align: center;
   }   
</style> 
</head> 
<body> 
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container"> 
      <img src= "images/tutimg.png"> 
      <div class="top-bottom">
         <h2>Top to Bottom Image Overlay</h2>
      </div> 
   </div> 
</body> 
</html>   
CSS Overlay - Bottom to Top Sliding
The following example shows an image with an overlay effect that slides up from the bottom of the image to the top when the user hovers over it 
<html> 
<head> 
<style> 
   .overlay-container img { 
      width: 200px; 
      height: 200px; 
      margin-left: 250px;
   } 
   .overlay-container { 
      position: relative; 
      width: 25%; 
      height: auto;
   }  
   .overlay-container:hover .bottom-top { 
      opacity: 1; 
      height: 200px; 
   } 
   .bottom-top { 
      position: absolute; 
      transition: 0.9s ease; 
      opacity: 0.3; 
      width: 200px; 
      border-radius: 5px;
      height: 0; 
      bottom: 0; 
      left: 250px;  
      background-color: #d346e6; 
      text-align: center;
      color: #ffffff;
   }
   h2 {
      text-align: center;
   }   
</style> 
</head> 
<body> 
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container"> 
      <img src= "images/tutimg.png"> 
      <div class="bottom-top">
         <h2>Bottom to Top Image Overlay</h2>
      </div> 
   </div> 
</body> 
</html>   
CSS Overlay - Left to Right Sliding
The following example shows an image with an overlay effect that slides from left to right when you hover over it
<html>
<head>
<style>
   .overlay-container img {
      width: 200px;
      height: 200px;
      margin-left: 250px; 
   }
   .overlay-container {
      position: relative;
      width: 25%;
      height: auto;
   }
   .overlay-container:hover .left-right { 
      opacity: 1;
      width: 200px;
   }
   .left-right { 
      position: absolute;
      transition: 0.9s ease;
      opacity: 0.3;
      width: 0; 
      border-radius: 5px;
      height: 200px; 
      top: 0;
      left: 0; 
      margin-left: 250px;
      background-color: #d346e6;
      text-align: center;
      color: #ffffff;
   }
   h2 {
      text-align: center;
   }
</style>
</head>
<body>
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container">
      <img src="images/tutimg.png">
      <div class="left-right">
         <h2>Left to Right Image Overlay</h2>
      </div>
   </div>
</body>
</html>
CSS Overlay - Right to Left Sliding
The following example shows an image with an overlay effect that slides from right to left when you hover over it 
<html>
<head>
<style>
   .overlay-container img {
      width: 200px;
      height: 200px;
      margin-left: 250px; 
   }
   .overlay-container {
      position: relative;
      width: 67%;
      height: auto;
   }
   .overlay-container:hover .right-left { 
      opacity: 1;
      width: 200px; 
   }
   .right-left { 
      position: absolute;
      transition: 0.9s ease;
      opacity: 0.3;
      width: 0; 
      border-radius: 5px;
      height: 200px; 
      top: 0;
      right: 0; 
      background-color: #d346e6;
      text-align: center;
      color: #ffffff;
   }
   h2 {
      text-align: center;
   }
</style>
</head>
<body>
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container">
      <img src="images/tutimg.png">
      <div class="right-left">
         <h2>Right to Left Image Overlay</h2>
      </div>
   </div>
</body>
</html>
CSS Overlay - Fade Effect
The following example shows how to create an overlay that appears on top of an image when the user hovers over it 
<html> 
<head> 
<style> 
   .overlay-container img { 
      width: 200px; 
      height: 200px; 
      margin-left: 250px;
   } 
   .overlay-container { 
      position: relative; 
      width: 25%; 
   }  
   .overlay-container:hover .fade-effect { 
      opacity: 0.9; 
      height: 200px; 
   } 
   .fade-effect { 
      position: absolute; 
      transition: 0.9s ease; 
      opacity: 0; 
      width: 200px; 
      height: 200px; 
      border-radius: 5px;
      top: 0; 
      left: 250px;  
      background-color: #d346e6; 
      text-align: center;
      color: #ffffff;
   }
   h2 {
      text-align: center;
   }   
</style> 
</head> 
<body> 
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container"> 
      <img src= "images/tutimg.png"> 
      <div class="fade-effect">
         <h2>Fade Overlay Effect</h2>
      </div> 
   </div> 
</body> 
</html> 
CSS Overlay - Image Title Overlay
Here is an example of an overlay that displays the title of an image when the user hovers over it 
<html> 
<head> 
<style> 
   .overlay-container img { 
      width: 200px; 
      height: 200px; 
      margin-left: 250px;
   } 
   .overlay-container { 
      position: relative; 
      width: 25%; 
   }  
   .overlay-container:hover .title-overlay { 
      opacity: 0.9; 
      height: 80px; 
   } 
   .title-overlay { 
      position: absolute; 
      transition: 0.9s ease; 
      opacity: 0; 
      width: 200px; 
      height: 80px; 
      border-radius: 5px;
      bottom: 0; 
      left: 250px;  
      background-color: #d346e6; 
      text-align: center;
      color: #ffffff;
   }
   h1 {
      text-align: center;
      color: #a0f037;
   }   
</style> 
</head> 
<body> 
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container"> 
      <img src= "images/tutimg.png"> 
      <div class="title-overlay">
         <h1>Tutorialspoint</h1>
      </div> 
   </div> 
</body> 
</html> 
CSS Overlay - Image Icon Overlay
Here is an example of an overlay that displays the icons over an image when the user hovers over it 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style> 
   .overlay-container {
      position: relative;
      width: 200px; 
      height: 200px; 
      margin-left: 40%;
   }  
   .overlay-container img { 
      width: 100%; 
      height: 100%;
   }
   .icon-overlay {
      position: absolute; 
      transition: 0.9s ease; 
      opacity: 0; 
      width: 100%;
      height: 100%; 
      top: 0;
      background-color: rgba(211, 70, 230, 0.9); 
      text-align: center;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .overlay-container:hover .icon-overlay {
      opacity: 1;
   }
   .display-icon {
      color: rgb(60, 235, 50);
      font-size: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   } 
   h2 {
         text-align: center;
   }
</style> 
</head> 
<body> 
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container"> 
      <img src="images/tutimg.png"> 
      <div class="icon-overlay">
         <a href="#" class="display-icon">
            <i class="fa fa-star"></i> 
         </a>
      </div> 
   </div> 
</body> 
</html>
CSS Overlay - Related Properties
Following table lists of CSS properties which help create overlay effect:
Property
Value
﻿position﻿
Defines how an element is positioned on the page.
﻿opacity﻿
Sets the transparency of an element.
﻿z-index﻿
Sets the stacking order of elements.
﻿transition﻿
Defines the different types of animation effects that can be applied to elements.
﻿
﻿
﻿
﻿
﻿
﻿

Property	Value
position	Defines how an element is positioned on the page.
opacity	Sets the transparency of an element.
z-index	Sets the stacking order of elements.
transition	Defines the different types of animation effects that can be applied to elements.

CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

Overlay

CSS Overlay - Basic Example

CSS Overlay - Top to Bottom Sliding

CSS Overlay - Bottom to Top Sliding

CSS Overlay - Left to Right Sliding

CSS Overlay - Right to Left Sliding

CSS Overlay - Fade Effect

CSS Overlay - Image Title Overlay

CSS Overlay - Image Icon Overlay

CSS Overlay - Related Properties