How to combine linear gradient in background image, opacity and text color change on hover?-CodePudding

Div tag contains background image with linear gradient of black and transparent from bottom. On mouse hover state, image changes opacity and the text over the image changes color simultaneously. How to do all this three things aforementioned. I want to achieve this similar effect.

Here is my code:

.container{
    position: relative;
    cursor: pointer;

}
.container::after{
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(
        0deg,
        rgba(0,0,0, 0.8) ,
        transparent 30%,
        transparent
    );
}
.container p{
    position: absolute;
    bottom: 2rem;
    padding: 0 2rem;    
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    color: var(--white);
}

.container p:hover{
    color: var(--black);

}
.container:hover{
    opacity: 0.4;
}

<div  >
  <img id="image1" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="Deep Earth">
  <p id="p1">Deep earth</p>
</div>

CodePudding user response：

You just needed to do some re-organizing in your CSS so you're selectors were targeting the correct elements. I also added a z-index to the text so it wasn't under the gradient.

.container {
  display: block;
  position: relative;
  cursor: pointer;
  width: fit-content;
}

.container::after {
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.8),
      transparent 30%,
      transparent);
}

.container p {
  display: block;
  position: absolute;
  bottom: 2rem;
  padding: 0 2rem;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 2rem;
  font-weight: 300;
  color: white;
  z-index: 2;
}

.container:hover p {
  color: black;

}

.container:hover img {
  opacity: 0.4;
}

<div >
  <img id="image1" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="Deep Earth">
  <p id="p1">Deep earth</p>
</div>

CodePudding user response：

I've changed up the CSS a fair bit, I've commented in the CSS code what I've done and why.

/* Body Margin 0 is just for the snippet */
body {margin: 0}

/* Added hidden overflow */
.container {
    cursor: pointer;
    overflow: hidden;
    position: relative;

}

/* Use both before and after */
.container::before,
.container::after {
    content: '';
    position: absolute;

    /* Same as top, right, bottom, left = 0 */
    inset: 0;

    /* z-index to control layer depth */
    z-index: 1;
}

/* Use before to simulate the opacity change */
/* Stops the text from fading as well as the container */
.container::before {
    background: white;
    opacity: 0;

    /* Place above dark gradient so that text is more visible */
    z-index: 2;

    /* Transition to make it look smooth */
    transition: opacity 512ms 0ms ease-in-out;
}
.container::after {
    background: linear-gradient(
        0deg,
        rgba(0,0,0, 0.8) ,
        transparent 30%,
        transparent
    );
}

/* Removes bottom margin/padding from last element */
.container > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Set the img to always be 100% of the viewport width */
.container img { width: 100vw }

.container p {
    color: white;
    position: absolute;

    /* Same as bottom: 2rem; left: 2rem; */
    inset: auto auto 2rem 2rem;
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2rem;
    font-weight: 300;

    /* Make sure the text wraps in the right place */
    max-width: calc(100% - 4rem);

    /* Forces text to be above before/after */        
    z-index: 3;

    /* Linear transition here! */
    /* White to black text can look out of sync otherwise */
    transition: color 512ms 0ms linear;
}

.container:hover p { color: black }
.container:hover::before { opacity: 0.4 }

<div  >
  <img id="image1" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="Deep Earth">
  <p id="p1">Deep earth</p>
</div>