Scrolling Instagram Story Model for Blogger
Creating a Scrolling Instagram Story Model for Bloggers using HTML and CSS
Introduction:
In this article, we will explore how to create a visually appealing and user-friendly scrolling Instagram story model using HTML and CSS. This model can be integrated into a blogger's website to showcase images and accompanying captions in a horizontal scrollable format. By implementing this feature, bloggers can engage their audience and provide a dynamic and interactive experience. So, let's dive into the code and understand how to create this scrolling Instagram story model.HTML Structure:
To begin, let's take a look at the HTML structure required for the scrolling Instagram story model:html
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/2.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
Replace your url with #
The above code represents a container div with the class "horizontal-friends-list" that will hold all the stories. Each story is represented by a figure element containing an image and a caption. You can customize the image source and the text for each story by replacing the URL and "text" placeholder respectively.
CSS Styling:
Now, let's move on to the CSS styling required to achieve the scrolling Instagram story model:
<div class="horizontal-friends-list">
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/2.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/3.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/4.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/5.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/6.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/7.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/8.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/9.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
</div>
<style>
@use postcss-preset-env {
stage: 0;
}
.horizontal-friends-list {
display: flex; /* Use flexbox for the horizontal layout */
gap: 3px;
overflow-x: auto; /* Add horizontal scrolling capability */
padding-bottom: .7rem; /* Add some bottom padding */
& > figure {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
user-select: none;
margin: 5px;
transition: transform 0.2s ease-in-out;
&:hover {
transform: scale(1.1);
}
&:last-child::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
right: 0;
inline-size: 1rem;
block-size: 100%;
inset-end: 0.2rem;
}
& > picture{
display: inline-block;
inline-size: 80px; /* Adjust the inline size value */
block-size: 80px; /* Adjust the block size value */
border-radius: 50%;
background: radial-gradient(hsl(0 0% 0% / 15%) 60%, transparent 0),
radial-gradient(white 65%, transparent 0),
linear-gradient(to top right, orange, deeppink);
&> a{}
& > img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
clip-path: circle(42%);
}
}
& > figcaption {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 500;
}
}
}
/* Add media query for mobile responsiveness */
@media (max-width: 600px) {
.horizontal-friends-list {
flex-wrap: nowrap; /* Prevent wrapping of figures */
justify-content: flex-start; /* Align figures to the left */
}
.horizontal-friends-list > figure {
flex-shrink: 0; /* Prevent figures from shrinking */
}
}
figure a{
color: red;
}
</style>
Explanation:
1. The `.horizontal-friends-list` class is used to style the container div. It utilizes flexbox to create a horizontal layout for the stories and enables horizontal scrolling by setting `overflow-x: auto`.2. Each story is styled using the `figure` selector. It is displayed as a flex container with a column layout and centered alignment.
3. On hovering over a story, it is scaled up using the `transform: scale(1.1)` property, providing a visual effect.
4. The last story is given a pseudo-element `::after` to create a visually pleasing end effect.
5. The `picture` element within each figure is styled to define the size and appearance of the image. The image is clipped to a circular shape using `clip-path`.
6. The `figcaption` element represents the caption for each story and is styled with ellipsis for overflowed text.
Mobile Responsiveness:
To ensure a responsive design for mobile devices, we apply a media query with a maximum width of 600px. Within this query, the following adjustments are made:1. The stories are prevented from wrapping using `flex-wrap: nowrap`.
2. The alignment is changed to `justify-content: flex-start` to align the stories to the left.
3. The `flex-shrink: 0` property is applied to prevent the stories from shrinking.