How can I display animated text over faded responsive image-CodePudding

I have the following code that display some images responsive on a page.

<!DOCTYPE HTML>

<html>

<head>
  <title>Test page</title>
  <style>
.wrapper {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  gap: 10px;
}

.item {
  border: 2px solid gray;
  display: flex;
}

.item img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
}


.item.large {
  grid-column: 3 / 3; 
  grid-row: 1 / span 2;
}

@media only screen and (max-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .item.large {
    grid-column: auto;
    grid-row: auto;
  }
  .item img {
    width: 100%;
  }
}

  </style>
</head>

<body>
<div >
  <div ><img src="img.jpg" /></div>
  <div ><img src="img.jpg" /></div>

    <div >
      <img src="img2.jpg"/>
    </div>

  <div ><img src="img.jpg" /></div>
  <div ><img src="img.jpg" /></div>
</div>

</body>

</html>

I am trying to figure out how I for the img2.jpg can have the same effect shown here https://www.w3docs.com/tools/code-editor/4132

But I have troubles getting it to work, can someone show me how I can implement this?

CodePudding user response：

Here you go:

<!DOCTYPE HTML>

<html>

<head>
  <title>Test page</title>
  <style>
.wrapper {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  gap: 10px;
}

.item {
  border: 2px solid gray;
  display: flex;

  /*testing purposes*/
  min-height: 250px;
}

.item img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
}


.item.large {
  grid-column: 3 / 3; 
  grid-row: 1 / span 2;

  /*added*/
  position: relative;
}
/*added*/
.item.large .fade {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 255, 0.438);
    opacity: 0;

    transition: all ease-in-out .4s;
}
.item.large .fade p {
    width: 100%;
    text-align: center;

    transition: all ease-in-out .4s;
}
.item.large:hover .fade {
    opacity: 1;
}
.item.large:hover .fade p {
    margin-top: 150px;
}

@media only screen and (max-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .item.large {
    grid-column: auto;
    grid-row: auto;
  }
  .item img {
    width: 100%;
  }
}

  </style>
</head>

<body>
<div >
  <div ><img src="img.jpg" /></div>
  <div ><img src="img.jpg" /></div>

    <div >
        <div ><p>animated text</p></div>
        <img src="img2.jpg"/>
    </div>

  <div ><img src="img.jpg" /></div>
  <div ><img src="img.jpg" /></div>
</div>

</body>

</html>

To explain: I made the .Item.large container relative so it can contain absolute elements. Then I added absolute element .fade with text inside. I made it opacity: 0; initially, with transition animation to ease-in-out in 0.4s and on hover I make it opacity: 1; which makes it visible and add margin to the text so it looks like it is sliding. Enjoy.