0

Currently, I have a hero image on my home screen. I have successfully placed an overlay on top of the image and added a bit of opacity to it as well. I am now trying to add a bit of text on top of the overlay/hero image and for some reason, the text appears to be inheriting the opacity from the overlay. I believe it has something to do with the position of the text in relation to the overlay, but I can't seem to make the text sit ontop of my overlay. Any suggestions would be much appreciated! the code is as follows:

import React from 'react'
import Wynbase from '../images/Wynbase.jpg'

// MUI STUFF
import Typography from '@material-ui/core/Typography'
import Grid from '@material-ui/core/Grid'
import Container from '@material-ui/core/Container'
import Box from '@material-ui/core/Box'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({
  background: {
    backgroundImage: `url(${Wynbase})`,
    position: 'relative',
    objectFit: 'cover',

    backgroundPosition: '30% -250px',
    width: '100%',
    height: 450,
    paddingTop: 70,
    margin: 0,
    backgroundRepeat: 'no-repeat',

    // Ipad screen
    '@media (max-width: 1024px)': {
      backgroundPosition: '50% -300px'
    }
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    opacity: 0.8,
    margin: 0,
    backgroundColor: '#7FB9C9'
  },
  overlay_text: {
    padding: '200px 0',
    // fontWeight: 'bold',
    postion: 'absolute',
    color: 'white',
    textAlign: 'center'
  }
}))

const Home = () => {
  const classes = useStyles()

  return (
    <Box>
      <Box className={classes.background}>
        <div className={classes.overlay}>
          <Container className={classes.overlay_text}>
            <Typography variant="h3">Welcome to JobTracker</Typography>
            <Typography variant="h3">
              Tracking Your Job Applications Made Easy
            </Typography>
          </Container>
        </div>
      </Box>
      <Box>
        <Container>More stuff will go here</Container>
      </Box>
    </Box>
  )
}

export default Home
Rob Terrell
  • 2,398
  • 1
  • 14
  • 36
  • 1
    No it isn't: there is no inheritance happening here at all. What's happening is that overlay has an opacity < 1, which means _everything in it_ is rendered at their own opacities and then the overlay _as a whole_ gets the overlay's opacity value applied on top. Think of it as creating a layer in Photoshop, drawing some stuff on it, then setting the entire layer to 80% opacity. The max anything's ever going to be in that layer is 80%. Some bits you drew might have be less, but never be more, opaque than the master opacity level. – Mike 'Pomax' Kamermans Mar 18 '20 at 15:47
  • 1
    Well yes, if you the opacity of the overlay to something, then everything within it will also have that opacity. If you only want the background of the overlay to be transparent, then use the rbga option for background color. You can convert hex to rgb values quite easily. So I would use: `background.color: rgba(127,185,201, 0.8)` for your overlay instead of the separate background and opacity values. – Michael Beeson Mar 18 '20 at 15:49
  • @Mike'Pomax'Kamermans Thanks for the clarification, I guess inheritance was a poor choice of words. I realize now that because I'm making everything in the div covering the image have opacity. My text, in turn, has opacity as well because it is within the div. – Rob Terrell Mar 18 '20 at 15:56
  • @MichaelBeeson that appears to have done the trick, I didn't realize that you could declare opacity within the rgba value. – Rob Terrell Mar 18 '20 at 15:57

0 Answers0