CSS image hover overlay slide from the left Archives

How do I zoom in on the image?

Please Share On:

Definition:

Here, you are going to learn how to how can you zoom in on the image on hover the mouse cursor over the image.

Let’s begin our design.

First, create a simple <html> code without any CSS code.

For this, you need a link to your image. See an example below:

HTML Source Code:

<h2 class="title">Image Zoom In</h2>
    <div class="container">
       <center><img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="zoom-in image" class="image"> </center>
         <p>
        <center>Zoom-in on mouse hover.</center>
      </p>
    </div>

CSS Source Code:

<style>
      .image:hover{
         transform: scale(1.5);
        -ms-transform: scale(1.5); /* For Internet Explorer 9 */
        -moz-transform:scale((1.5); /* Firefox */
        -webkit-transform:scale((1.5); /* Safari and Chrome */
         -o-transform:scale((1.5); /* Opera */
      }
    </style>

Full Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image:hover{
         transform: scale(1.5);
        -ms-transform: scale(1.5); /* For Internet Explorer 9 */
        -moz-transform:scale((1.5); /* Firefox */
        -webkit-transform:scale((1.5); /* Safari and Chrome */
         -o-transform:scale((1.5); /* Opera */
      }
    </style>
  </head> 

  <body> 
    <h2 class="title">Image Zoom In</h2>
    <div class="container">
       <center><img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="zoom-in image" class="image"> </center>
         <p>
        <center>Zoom-in on mouse hover.</center>
      </p>
    </div>
   
  </body>
</html>

Output:

Image Zoom In

Zoom-in on mouse hover.

try it yourself

Donate to support writers.

You may be interested in the following topics:

How do I zoom in on the image?

CSS Image Overlay Zoom

Please Share On:

Definition:

Here, you are going to learn how to create an image overlay zoon effect on mouse hover.

Let’s begin our design.

First, create a simple <html> code without any CSS code.

For this, you need an image and an overlay text. Make an HTML container and put your image and text in it.

HTML Source Code:

<h3 class="title">Image Overlay Zoom</h3> 
      <div class = "container">
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="CSS Image Overlay Zoom" class="image">
        
        <div class="overlay">
    		<div class="text">This is a Opera House.</div>
  		</div>
      </div>

CSS Source Code:

<style>
    .container {
         position: relative;
         width: 50%;
      }
      
       .image {
        display:block;
        width: 100%;
        height: auto;
        opacity: 1;
        transition: .5s ease;
      }
      
      .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #008CBA;
        overflow: hidden;
        width: 100%;
        height: 100%;
        transform: scale(0);
        transition: .3s ease;     
	  }
      
      .container:hover .overlay {
 		 transform: scale(1);
	   }
      
      .container:hover .overlay-box
      {
        opacity: 1;
 	  }
      
      .text{    
        background-color: black;
        color: white;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;  
        padding: 10px 15px;
      }
      
    </style>

Full Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .container {
         position: relative;
         width: 50%;
      }
      
       .image {
        display:block;
        width: 100%;
        height: auto;
        opacity: 1;
        transition: .5s ease;
      }
      
      .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #008CBA;
        overflow: hidden;
        width: 100%;
        height: 100%;
        transform: scale(0);
        transition: .3s ease;     
	  }
      
      .container:hover .overlay {
 		 transform: scale(1);
	   }
      
      .container:hover .overlay-box
      {
        opacity: 1;
 	  }
      
      .text{    
        background-color: black;
        color: white;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;  
        padding: 10px 15px;
      }
      
    </style>
 
  </head>
  
  <body> 
      <h3 class="title">Image Overlay Zoom</h3> 
      <div class = "container">
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="CSS Image Overlay Zoom" class="image">
        
        <div class="overlay">
    		<div class="text">This is a Opera House.</div>
  		</div>
      </div>    
  </body>
</html>

Output:

Image Overlay Zoom

This is a Opera House.

Donate to support writers.

You may be interested in the following topics:

CSS Image Overlay Icon

Please Share On:

Definition:

Here, you are going to learn how an icon will appear over an image when you hover your mouse cursor over the image.

Let’s begin our design.

First, create a simple <html> code without any CSS code.

For this, you need an image and an icon. Make an HTML container and put your image and an icon in it.

You can use font Awesome icons and define a link in your HTML code before using it. See an example below:

HTML Source Code:

<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">    

<div class="container">
      <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Overlay Text" class="image">
      <div class="overlay">
     <a href="#" class="icon" title="thumbs-up">
      <i class="fa fa-thumbs-up" aria-hidden="true"></i>
    </a>
</div>
    </div>

CSS Source Code:

<style>
    .container {
      position: relative;
      width: 100%;
      max-width: 400px;
    }

    .image {
      display: block;
      width: 100%;
      height: auto;
    }

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .3s ease;
    }

    .container:hover .overlay {
      opacity: 0.5;
    }

    .icon {
      background: white;
      font-size: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }
    </style>

Full Source Code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
    <style>
    .container {
      position: relative;
      width: 100%;
      max-width: 400px;
    }

    .image {
      display: block;
      width: 100%;
      height: auto;
    }

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .3s ease;
    }

    .container:hover .overlay {
      opacity: 0.5;
    }

    .icon {
      background: white;
      font-size: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }
    </style>
 
  </head>
  
  <body> 
        <div class="container">
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Overlay Text" class="image">
          <div class="overlay">
           <a href="#" class="icon" title="thumbs-up">
            <i class="fa fa-thumbs-up" aria-hidden="true"></i>
          </a>
			</div>
    	</div>  
  </body>
</html>

Output:

Donate to support writers.

You may be interested in the following topics:

CSS Image Overlay Title

Please Share On:

Definition:

Here, you are going to learn how a title will appear over an image when you hover your mouse cursor over the image.

Let’s begin our design.

First, create a simple <html> code without any CSS code.

For this, you need an image and a title of the text. Make an HTML container and put your image and title in it.

HTML Source Code:

    <div class="container">
      <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Overlay Text" class="image">
      <div class="overlay">This is Opera House</div>
    </div>

CSS Source Code:

<style>
      .container {
        position: relative;
        width: 100%;
        max-width: 500px;
      }

      .image {
        display:block;
        width: 100%;
        height: auto;
        opacity:1;
      }

      .overlay {
        position: absolute; 
        bottom: 0; 
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5);
        color: #f1f1f1; 
        width: 90%;
        transition: .5s ease;
        opacity:0;
        color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
      }

      .container:hover .overlay {
        opacity:1;
      }
      
    </style>

Full Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 100%;
        max-width: 500px;
      }

      .image {
        display:block;
        width: 100%;
        height: auto;
        opacity:1;
      }

      .overlay {
        position: absolute; 
        bottom: 0; 
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5);
        color: #f1f1f1; 
        width: 100%;
        transition: .5s ease;
        opacity:0;
        color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
      }

      .container:hover .overlay {
        opacity:1;
      }
      
    </style>
  </head> 

  <body> 
    <h3 class="title">Image Overlay Title</h3>

    <div class="container">
      <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Overlay Title" class="image">
      <div class="overlay">This is Opera House</div>
    </div>    
  </body>
</html>

Output:

Image Overlay Title

This is Opera House

Donate to support writers.

You may be interested in the following topics:

CSS Image Hover Overlay Slide from the right

Please Share On:

Definition:

Here, I am going to show how you can give an image slide effect from the top, bottom, left, and right sides.

Let’s first start the Image hover slide effect from the right.

Our task to complete is, whenever we put our mouse over an image, the image shows a sliding effect that travels from right to left and displays some user-choice text. Here I will just display the text “Slide from the right”.

Here is an example we are going to design. Put your mouse cursor over the below image.

Slide from the right

Let’s begin our design.

First, create a simple <html> code without any CSS code.

<!DOCTYPE html>
<html>
  <head>
 
  </head>
  
   <body> 
      <h3 class="title">Image Hover Overlay Slide From The Right</h3> 
      <div class="container">
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="CSS Image Hover Overlay Slide from the right" class="image">
        
        <div class="overlay-right-slide">
    		<div class="text">Slide from the right</div>
  		</div>
      </div>    
  </body>
</html>

Output:

Now, style your container and image. Make sure you keep your container position relative and container width will be your design requirement. Here, I have given 50%. You can give 10%, 20%, 100%, or your chosen size.

.container {
         position: relative;
         width: 50%;
      }

Now, we need to design the image with an opacity defined as 1. The opacity will only change as the mouse hovers over the image. Initial opacity will remain at 1 which means your image shows in full transparency.

Make your width 100 percent which covers all your container size and height remains auto. Add the below code to your style sheet.

.image {
        display:block;
        width: 100%;
        height: auto;
        opacity: 1; 
      }

Output:

Your output still looks the same as before.

Now, it’s time to design your overlay. The overlay must be the same size as your image and in an absolute position and at the center of the image. Now, add the below code to your style sheet.

.overlay-right-slide {
        position: absolute;     
        opacity:0;
        bottom: 0;
 	    left: 100%;
        right: 0;
        width: 0;
  		height: 100%;
        overflow: hidden;
        transition: .5s ease;
        background-color: blue;
	  }

Output:

Your output looks like this:

The text “Slide from the right” is hidden behind the main image

Now apply the hover effect on the image and overlay. Add the below code to your style sheets.

.container:hover .image {
 		 opacity:0.7;
	   }
      
      .container:hover .overlay-bottom-slide
      {
        top: 0;
        height: 100%;
        opacity:0.5;
 	  }

Output:

Now, the output looks like the below:

Image Hover Overlay Slide From The Right

Slide from the right

Now, it is time to design your text, put your text in the absolute center with white color text.

Add the below code to your style sheet

.text{       
        color: white;
        font-size: 14px;
        padding: 10px 15px;  
        text-align: center;
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
      }

Now, See your final result by clicking the below “TRY IT YOURSELF” button.

Try it yourself

Donate to support writers.

You may be interested in the following topics: