Add some text onto the Box Component in Material UI

I am looking to replicate the hover functionality (UI) seen in this example: Desired UI Source:

Since adjusting background image styles can be complex, I have opted to use the Box Component from Material UI. Within the Box Component, I have implemented the image and added desired transitions such as zooming out. However, I am facing an issue with adding text to the Box component, which is essentially inside a Card Component.

Here is the code snippet for the specified section:

<Grid item xs={4}>
        <Card
          onMouseDown={console.log("fewfwg")}
          className={classes.cardWelcomeTwo}              
        >
          <CardActionArea>
            <Box variant="outlined" style={{ position: "relative" }}>
              <img
                className={classes.paperImgWelcome}
                src="https://render.fineartamerica.com/images/rendered/default/greeting-card/images-medium-5/ferris-wheel-sunset-eddie-yerkish.jpg?&targetx=0&targety=-25&imagewidth=500&imageheight=751&modelwidth=500&modelheight=700&backgroundcolor=AF7163&orientation=1"
                alt="nothing"
              />
              <CardContent>
                <Typography
                  variant="h4"
                  component="h2"
                  className={classes.welcomeGridHeadingText}
                >
                  Explore The City
                </Typography>
              </CardContent>
            </Box>
          </CardActionArea>
        </Card>
      </Grid>

Here are the styles defined in Styles.js:

paperImgWelcome: {
    flexGrow: 1,
    position: "relative",
    "&:hover ": {
      display: "flex",
      transition: "0.6s all ease-in-out",
      // animationTimingFunction: "ease-out",
      transform: "scale(1.1)",
      backgroundSize: "75%",
      opacity: "0.75",
    },
  },
  cardWelcomeTwo: {
    position: "relative",
    height: 510,
    flexGrow: 1,
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",

  },
welcomeGridHeadingText: {
    position: "absolute",
    textAlign: "center",
    color: "white",
    fontFamily: "'Lato'",
    fontSize: "60px",
    letterSpacing: "5px",
    lineHeight: "60px",
  },

Here is how my current UI appears: not hovered hovered

javascriptcssreactjsmaterial-uijss

Answer №1

If you're looking to create a hover effect using the ::after pseudo-element along with the content property, here's a neat trick for you. The effect is only visible on hover.

Check out this demonstration:

Custom Stylesheet (CSS)

.backgroundImage {
  background-image: url("https://render.fineartamerica.com/images/rendered/default/greeting-card/images-medium-5/ferris-wheel-sunset-eddie-yerkish.jpg");
  height: 500px;
  color: white;
  padding: 50px;
}

.backgroundImage:hover::after {
  content: "For a ride";
}

HTML Structure

<div className="backgroundImage">
  <h1>Let's Go</h1>
</div>

This example utilizes basic HTML and CSS for simplicity.

If you're interested in applying this effect in a material-ui/React project, you can view it live on this sandbox link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to retrieve an HTML file from a different directory using Express?

I am currently utilizing an HTML file in the same folder. How can I access an HTML file saved in a different folder using express? Thank you. const express=require('express') const path=require('path') const app=express() app.get(& ...

javascriptnode.jsexpressweb-development-server

In order to determine if components linked from anchor elements are visible on the screen in Next.js, a thorough examination of the components

Currently, I am in the process of developing my own single-page website using Next.js and Typescript. The site consists of two sections: one (component 1) displaying my name and three anchor elements with a 'sticky' setting for easy navigation, a ...

javascripttypescriptnext.js

Sequential cascade filtering without a preset default option

Please note: The following code snippet has been adjusted and is now functional. In a MySQL database table, I have the following columns with corresponding values: Category (Fruit, Vegetable) Type (Apple, Orange, Pumpkin, Potato) Subtype (Red Delicious, ...

javascriptjqueryhtmlmysqldrop-down-menu

Should components be stored in state for optimal performance?

Should entire React Components be stored in the component state or redux state? While it is optional (as you can store a string and render the component conditionally), in some cases, it's simpler to just store the whole component. For instance, cons ...

reactjsredux

Maximizing the use of default top positioning for absolutely positioned elements

After observing that an element with position:absolute can have its default top value determined based on its immediate parent's position, regardless of whether it is set to relative or not, BoltClock explained that in such cases, it remains in a stat ...

csscss-position

Having issues with downloading a Zip file from the axios post API in React due to receiving an invalid file

Trying to extract downloaded file, but getting error const extractDownloadedFile = async (ids: number) => { try { const response = await axios .post(`/api/folders/${folderDetails.id}/download`, { resources: ids, }) .then( ...

reactjspostaxios

Prevent any unauthorized modifications to the ID within the URL by implementing appropriate security measures

I am currently developing an application using React and Express. The URL structure is similar to this: /dashboard?matchID=2252309. Users should only have access to this specific URL, and modifying the match ID should not allow them to view the page. Is ...

javascriptreactjsexpress

Customize bullet list icons to adjust in size based on content using css

In my CMS project, the CMS team has a special requirement regarding unordered and ordered lists. They want the size of the bullet list icon to adjust according to the text content within the list. The image below shows the default design of a list item: ...

javascriptjqueryhtmlcss

Send information to the dialogue box upon clicking

After clicking on my accordion, I expect the information in this line to be transferred to the dialog box form. However, I am not seeing any data being passed to the form. Why isn't the form receiving the data? import React, { useEffect, useStat ...

reactjsformsmaterial-ui

Showing nested arrays in API data using Angular

I would like to display the data from this API { "results": [ { "name": "Luke Skywalker", "height": "172", "mass": "77", & ...

javascripthtmlangular

In React, the ES6 prototype method map failed to render anything on the screen

Is there an issue with my map method implementation? var App = React.createClass({ getInitialState(){ return { items:[1,2,3] } }, renderItem(){ return( this.state.items.map((item,i))=> <li key={i}> { ...

javascriptreactjs

Am I approaching ReactJs in the wrong way?

Today, I participated in a discussion about the concept of "dumb components and smart components" and it made me reflect on my own use of dumb components. For example, in a mini YouTube clone app that I built for learning and fun, I realized that I have b ...

reactjsreact-router

Opening multiple dialogs in Jquery Dialog box

I have several images displayed on a single page. When each image is clicked, I want a dialog box to open. I currently have 6 instances of this setup in my HTML. However, when I click on an image, all 6 dialogs pop up with the same information as the first ...

javascriptjqueryhtml

Guidelines for adjusting the next/image component to a full 100% height

In my Next.js application, I am trying to display an image that fills the full height of its container while automatically adjusting its width based on its aspect ratio. I attempted the following method: <Image src="/deco.svg" alt=&qu ...

javascriptreactjsnext.jsnextjs-image

Node functions continue to run smoothly without affecting the loop

I am working on a webdriverjs application and I am trying to determine when jQuery has finished its processes on the page. I have implemented some methods, but it seems that even when the condition is supposed to trigger an else statement and stop the loop ...

javascriptnode.js

Alert: Font preload was not utilized within a short timeframe after the window's load event

I've been working on optimizing the loading speed of fonts on my website, so I added the following: <link rel="preload" href="{{ '/css/fonts/bebasneue-webfont.woff' | prepend: site.baseurl | prepend: site.url }}" as="font" type="fo ...

cssgoogle-chromefonts

Issue Arising from Printing a Custom Instruction in a Schema Generated Document

When dynamically adding a directive, the directive is correctly generated in the output schema. However, it seems to be missing when applied to specific fields. Here is how the directive was created: const limitDirective = new graphql.GraphQLDirective({ na ...

javascripttypescriptgraphqlgraphql-jsgraphql-tools

Is it just me or does my node server come preconfigured with CORS enabled? What am I overlooking here?

I have a simple node and express server set up here. Surprisingly, even without any middleware, I am able to successfully log the response from an axios request made to google.com. Doesn't this usually trigger a cors error, requiring some form of midd ...

javascriptnode.jsexpresscors

The Discord.js command outright declines to function

I'm having trouble with a code that I'm working on. The goal is to create a command that is enabled by default, but once a user uses it, it should be disabled for that user. However, when I try to execute the code, it doesn't work at all and ...

javascriptdiscord.js

The React live search functionality is operational, however, it is not effectively canceling previous requests in the

Currently, I am in the process of following a helpful tutorial over at "alligator.io". You can check out the specific link here: https://alligator.io/react/live-search-with-axios/ The code snippet below belongs to App.js: import React, { Component } from ...

javascriptreactjsaxioslivesearch