Hello..guys Today I am back for you with another interesting topic. today's topic is how to put beautiful wallpapers on our websites and see how to give them different beautiful effects.

Overlay_Effects_Chaitu_Informative_Blogs

So let's see how to display different beautiful effects along with the details of those images when we hover the mouse cursor over them when we place certain images on our blog or any website.

For this, I just used Bootstrap and CSS for all of those image overlay effects. and do not think that bootstrap is a new technology. Bootstrap is similar to the Advanced Framework for HTML that we usually use to make web pages.

Note: Instead of the wallpapers, I used here, keep the wallpapers that you like with different styles and sizes.

I try to make every post I make understandable and easy for you so I need your support to make more posts like this.

If you want to see the previous posts I have given the links below click on them and see them.

Also, Read

Check the code below:

File name: Chaitu_Info_Blogs.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>Gradient and blur overlay effects with images</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="Chaitu_Info_Blogs.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<div class="row">

<div class="image">

<img class="image_img" src="pic_1.jpg">

<div class="image_overlay img_overlay_gradient_1">

<div class="image_title">Lighthouse</div>

<p class="image_description">Here we have a beautiful light house.</p>

</div>

</div>

<div class="image">

<img class="image_img" src="pic_2.jpg">

<div class="image_overlay img_overlay_blur_1">

<div class="image_title">Beach</div>

<p class="image_description">Here we have a nice beach.</p>

</div>

</div>

<div class="image">

<img class="image_img" src="pic_3.jpg">

<div class="image_overlay img_overlay_blur_2">

<div class="image_title">Mountains</div>

<p class="image_description">Here we have Mountains.</p>

</div>

</div>

<div class="image">

<img class="image_img" src="pic_4.jpg">

<div class="image_overlay img_overlay_gradient_2">

<div class="image_title">Sand beach</div>

<p class="image_description">Here we have a sand beach.</p>

</div>

</div>

</div>

</div>

</body>

</html>

File name: Chaitu_Info_Blogs.css

.image {

        left: 155px;

        top:40px;

        position: relative;

        width: 400px;

        padding: 4px;

    }

.image_img {

       display: block;

       width: 100%;

       height:300px;

    }

.image_overlay {

       position: absolute;

       top: 0;

       left: 0;

       width: 100%;

       height: 100%;

       color: black;

       display: flex;

       flex-direction: column;

       align-items: center;

       justify-content: center;

       opacity: 0;

       transition: opacity 0.25s;

    }

.image_overlay > * {

       transform:translateY(20px);

       transition: transform 0.25s;

    }

.image_overlay:hover {

      opacity: 1;

    }

.img_overlay_gradient_1 {

      background: linear-gradient(to bottom, #f128f89b 0%, #fab73aa9 100%);

    }

.img_overlay_gradient_2 {

      background: linear-gradient(to bottom, #4988fdab 0%, #fa403aa9 100%);

    }

.img_overlay_blur_1 {

      backdrop-filter: blur(4px);

      background: linear-gradient(to bottom, #33ccff9b 0%, #ff99ccc2 100%);

    }

.img_overlay_blur_2 {

      backdrop-filter: blur(4px);

      background: linear-gradient(to bottom, #3efa4e9b 0%, #ebfd46b2 100%);

    }

.image_overlay:hover > * {

      transform:translateY(0);

    }

.image_title {

      font-size: 25px;

      font-family: jabjai;

      font-weight: bold;

    }

.image_description {

      font-size: 25px;

      margin-top: 5px;

      font-family: Brush Script MT;

      text-align: center;

    }

Result:

Result_Chaitu_Informative_Blogs


Conclusion:

Designing of gradient and blur overlay effects on wallpapers by using HTML and CSS coding languages.


I hope you like this article I posted. this is something I tried with an idea of my own. if you also want to develop something similar, I'll tell you the programming languages or techniques that can be used.

There are thousands of the best online free learning sites available on the internet. if you want to learn any programming language or any other computer course. There you can learn the technology you want nicely and even digital certificates are provided. After completing the course, it will be useful for you while applying for any job. and also you can mention the certificate details on your resume.

If you have any doubts drop your comments below and please feel free to use this code without hesitation. and also share with your friends and family members.