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.
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
- Create simple canvas drawing App by using HTML, CSS and JS
- How to give database connection to web pages
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:
0 Comments