Blog Section Page Hover Effect
Blogging refers to the practice of writing and publishing articles, opinions, or personal stories on a website or online platform. A blog is typically maintained by an individual or a group of individuals who regularly write posts on a variety of topics, including news, politics, entertainment, lifestyle, and more.
Blogging has become a popular form of self-expression and communication in recent years, thanks to the widespread availability of easy-to-use blogging platforms like WordPress, Blogger, and Tumblr. These platforms allow bloggers to create and publish content quickly and easily, without requiring any specialized technical skills.
There are many different types of blogs, each with its own focus and style. Some bloggers write about their personal experiences and opinions, while others focus on news, analysis, or commentary on specific topics. Some blogs are updated frequently, while others are updated only occasionally.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blog section page</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="blog" id="blog">
<div class="blog_div">
<div class="blog_box">
<img src="img1.jpg">
<div class="conent">
<div class="nav">
<h2>Thailand</h2>
<h2>4.3<ion-icon name="star"></ion-icon> </h2>
</div>
<p>The next flight is on 26th Dec</p>
</div>
</div>
<div class="blog_box">
<img src="img2.jpg">
<div class="conent">
<div class="nav">
<h2>Maldives</h2>
<h2>4.3<ion-icon name="star"></ion-icon> </h2>
</div>
<p>2 flights every week</p>
</div>
</div>
<div class="blog_box">
<img src="img3.jpg">
<div class="conent">
<div class="nav">
<h2>Hong Kong</h2>
<h2>4.3<ion-icon name="star"></ion-icon> </h2>
</div>
<p>Daily 1 flight</p>
</div>
</div>
<div class="blog_box">
<img src="img4.jpg">
<div class="conent">
<div class="nav">
<h2>Thailand</h2>
<h2>4.3<ion-icon name="star"></ion-icon> </h2>
</div>
<p>The next flight is on 12th Oct</p>
</div>
</div>
</div>
</section>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
transition: .2s linear;
font-family: 'Roboto' , sans-serif;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar{
width: .8rem;
}
html::-webkit-scrollbar-track{
background: transparent;
}
body{
background: #222529;
}
/* ================================== */
.blog{
width: 100%;
height: auto;
padding: 100px 50px;
}
.blog_div{
display: grid;
grid-template-columns: repeat(auto-fit , minmax(200px ,1fr));
gap: 30px;
}
.blog_box{
height: 420px;
overflow: hidden;
border-radius: 30px;
}
.blog_box img{
width: 100%;
height: 100%;
}
.blog_box:hover img{
transform: scale(1.2);
}
.conent{
width: 100%;
height: 200px;
position: relative;
top: -30%;
background: rgba(0, 0, 0, .5);
padding: 10px 20px;
opacity: 0;
}
.conent .nav{
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
}
.conent .nav h2{
color: #eee;
font-size: 30px;
font-weight: 600;
font-family: 'Tilt Neon',cursive;
}
.conent .nav h2 ion-icon{
color: yellow;
font-size: 30px;
position: relative;
top: 2px;
padding: 0 3px;
}
.conent p{
font-size: 18px;
color: rgba(255, 255, 255, .7);
padding: 5px 15px;
}
.blog_box:hover .conent{
opacity: 1;
}
Blogging has a number of benefits, both for bloggers and for their readers. For bloggers, blogging can be a great way to connect with others who share their interests, build a personal brand, and even make money through advertising or sponsored content. For readers, blogs can be a valuable source of information and entertainment, offering insights and perspectives that may not be available in traditional media.
Overall, blogging is a powerful tool for anyone who wants to express themselves, share their knowledge or experiences with others, or build an online presence.
#template #hovereffect #website #hover #menu #sourcecode #html #css #web