4 min read

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

Build an beautiful image transition section with Nextjs & Material-UI to separate the content.
Build An Image Transition Section with Nextjs & Material-UI v5

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 with image container

Create the file:

touch components/SectionImage.jsx

Add the code:

import { Box } from "@material-ui/core";
import * as React from "react";

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 can set the height value of the "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.

  • Resize the photo to 1920 x 1080px
  • 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

The filter layer is optional. Since we don't have the title and subtitle in the image section, we don't need a dark black layer to make the title and subtitle stand out.

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 find the alpha value you like the most
  • Or just delete the black layer if you don't like it

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

If you need me to elaborate on the code in the tutorial, feel free to reach me out on Twitter and tell me which part you need further explanation. Or if you have any feedback, improvement, suggestion or error.