Build An Image Transition Section with Nextjs & Material-UI v5

Build an beautiful image transition section with Nextjs & Material-UI to separate the content.

Section image hero

This tutorial is short as it's almost similar to build a hero section.

What is an image transition section?

Just imagine you visit a website full of the paragraph. How do you feel?

The visitor either force themselves to read painfully or leave your website. But, I believe 95% of the visitor will drop your website immediately. Why read with pain when there are thousands of similar websites.

Hence, we need a beautiful and relevant image section to separate your content.

Tutorial 5: Build An Image Transition Section

Note: If you direct land on this page from searches, you may want to visit:-

What do we want to achieve?

  • An image section to fill the entire width of all devices.
  • The image can be framed but not shrink.

Let's get started!

Initial The Component

Create the file,

touch components/SectionImage.jsx

Add the code:

import { Box } from "@mui/material";

const SectionImage = () => {
  return (
    <Box
      component="section"
      container
      sx={{
        position: "relative",
        width: "100%",
        height: "60vh",
        overflow: "hidden",
        zIndex: -100,
      }}
    ></Box>
  );
};

export default SectionImage;
  • Since we don't need to centre the title and subtitle, we'll use the Box component.
  • You could adjust the height with "vh" to suit your use case.

The Section Image

I'll use an image by Jay Wennington on Unsplash. If you want to use the same image, you can download it with this link.

  • Download the medium size
  • Rename it to "fusion-food"
  • Add to public directory
import Image from "next/image";

De-structure the props, and add the Next image:

Add Image Section To Homepage

Open ./pages/index.js

import SectionImage from "../components/SectionImage";

Add the code:

 <SectionImage imgSrc="/fusion-food.jpg" imgAlt="fusion food" />

Save the file,

npm run dev

Scroll to the image transition section and check the image:

  • Open the Chrome developer tools (Hit F12)
  • Toggle device toolbar (ctrl + shift + m)
  • No matter how you resize the width, the image is always attached to the edge

πŸ“Œ If you view the image section on the desktop, you will find that the image top and bottom are cut-off. This result is what we want instead of shrink the image to fit the image container.

Add The Filter Layer

It's optional. Since we don't have the title and subtitle, we don't need a dark layer to increase the contrast ratio.

My personal perspective is the image is too bright. Hence, I apply a light black layer to darken the image.

Add the code:

<Box
  sx={{
    position: "absolute",
    inset: 0,
    backgroundColor: "rgba(0,0,0, .2)",
  }}
/>;
  • Save and check out the image in your browser.
  • Adjust the alpha value of RGBA to find the best value you like the most.

ctrl + c to close the development server

We successfully build the image transition section with Nextjs & Material-UI

Next~

We're going to build a customer review section.

Build Customer Review Section With Nextjs & Material-UI
You often hear about DRY (Don’t Repeat Yourself) while learning to code. Many Master, Pro, Ninja, Barbarian, Magician, Monk, Code Fu Martial Artists, and some senior coder will tell you not to repeat your code in their video or tutorial. (Forgive me for the long and cold joke above 😏) You

Feel free to tweet me if you have any feedback, improvement, suggestion or error.