Fade Title On Image code
<html lang="en">
<head>
<title>Fade Title On Image</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Borel&family=Bricolage+Grotesque&family=Pacifico&family=Poppins&family=Preahvihear&family=Raleway:wght@300&family=Roboto:wght@100&family=Rubik:wght@300;400&family=Ubuntu:wght@500&display=swap');
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: roboto;
}
.main {
width: 400px;
margin: 50px auto;
position: relative;
border-radius: 5px 5px 0px 0px;
overflow: hidden;
/* border: 1px solid #016754; */
}
.task-number {
background-color: #016754;
color: #fff;
padding: 6px 10px;
font-weight: bold;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
}
.img-div {
width: 400px;
height: 300px;
}
.img-div img {
width: 400px;
height: 100%;
}
.text-for-div {
width: 400px;
height: 300px;
padding: 100px 0px;
text-align: center;
background-color: #75ffe667;
font-family: Arial;
position: absolute;
top: 37.33px;
opacity: 0;
transition: 0.5s;
border: 1px solid #ececec;
}
.text-for-div h2 {
margin-bottom: 5px;
}
.text-for-div h2{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.main:hover .text-for-div {
opacity: 1;
}
/* task 2 */
.text-for-slide-div {
top: 100%;
opacity: 1;
}
.main:hover .text-for-slide-div {
top: 37.33px;
}
/* task 3 */
.main-for-task-3 {
margin-bottom: 0px;
border: none;
}
.text-for-slide-2-div {
background-color: #ffffff;
transition: 0.5s;
color: #016754;
}
.bottom-title {
width: 400px;
color: #016754;
margin: auto;
padding: 16px 10px;
margin-bottom: 50px;
/* border: 1px solid #676767; */
border-radius: 0px 0px 10px 10px;
/* box-shadow: 0px 5px 20px 0px #808080c7; */
box-shadow: 0px 5px 10px 0px #7777;
border-top: none;
text-align: center;
font-family: roboto;
font-size: 18px;
font-weight: 300;
}
</style>
</head>
<body>
<!-- task 1 -->
<div class="main">
<div class="task-number">
<h2>Task 1</h2>
</div>
<div class="img-div">
<img src="https://picsum.photos/200/300" alt="404">
</div>
<div class="text-for-div">
<h2>Nature</h2>
<h4>Its beautiful image of nature.</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, reiciendis.</p>
</div>
</div>
<!-- task 2 -->
<div class="main">
<div class="task-number">
<h2>Task 2</h2>
</div>
<div class="img-div">
<img src="https://picsum.photos/300/300" alt="404">
</div>
<div class="text-for-div text-for-slide-div">
<h2>Nature</h2>
<h4>Its beautiful image of nature.</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, reiciendis.</p>
</div>
</div>
<!-- task 3 -->
<div class="div-for-task-3">
<div class="main main-for-task-3">
<div class="task-number">
<h2>Task 3</h2>
</div>
<div class="img-div">
<img src="https://picsum.photos/300/200" alt="404">
</div>
<div class="text-for-div text-for-slide-div text-for-slide-2-div">
<h2>Nature</h2>
<h4>Its beautiful image of nature.</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, reiciendis.</p>
</div>
</div>
<div class="bottom-title">
<h4>One Day Tour in Rajasthan</h4>
</div>
</div>
</body>
</html>
कोई टिप्पणी नहीं