fade in opacity when img spans

Question

I'm making a portfolio for my graphic design activity.

I'm trying to make a home page where hover a link reveals an image and it works. I'm simply looking for a way to make the image fade in as it reveals itself.

I've added a snippet below. If anyone can help, it would be greatly appreciated :) have a nice one

#container { width: 100%; margin-top: 0px; height: auto; float: left; font-size: 30px; padding-bottom: 4px; border: 1px solid green;}

#container a { float: left; color: #ff4d00; text-decoration: none; height: auto; margin-top: 0px; }
#container a:hover span { display: block; position: absolute; top: 20%; left: 10%; right: 10%; bottom: 20%; }
#container a span { display: none; z-index: 4; margin: 0; } 
img { opacity: 1; transition: 1s; }
.center { display: block; margin-left: auto; margin-right: auto; width: auto; }

    <div id="container">  
                  <a href="Project 1.html">
                    <p>Project 1.</p><br>
                      <span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000g" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
                      </span>
                  </a>
                  <a href="Project 2.html">
                    <p>Project 2.</p>
                      <span><img src="https://images.unsplash.com/photo-1629197520635-16570fbd0bb3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Z3JlZW4lMjB0ZXh0dXJlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
                      </span>
                  </a>
                  <a href="Project 3.html">
                    <p>Project 3.</p>
                      <span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
                      </span>
                  </a>

Snorlax · Accepted Answer · 2022-06-26T11:56:54.153

Do you mean transition fade on the image when you hover links? If that's what you mean you can't do it using display: none; to display: block; This is not allowed. However you can solve the problem in a different way, the visibility parameter allows you to do this. I leave you an example below.

#container {
  width: 100%;
  margin-top: 0px;
  height: auto;
  float: left;
  font-size: 30px;
  padding-bottom: 4px;
  border: 1px solid green;
  }

#container a {
  float: left;
  color: #ff4d00;
  text-decoration: none;
  height: auto;
  margin-top: 0px;
}

#container a span {
  position: absolute;
  top: 40%;
  left: 10%;
  right: 10%;
  bottom: 0%;
  z-index: 4;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s, opacity 0.2s;  
}

#container a:hover span {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.2s, opacity 0.2s;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto; 
}

<div id="container">  
                  <a href="Project 1.html">
                    <p>Project 1.</p><br>
                      <span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000g" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
                      </span>
                  </a>
                  <a href="Project 2.html">
                    <p>Project 2.</p>
                      <span><img src="https://images.unsplash.com/photo-1629197520635-16570fbd0bb3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Z3JlZW4lMjB0ZXh0dXJlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
                      </span>
                  </a>
                  <a href="Project 3.html">
                    <p>Project 3.</p>
                      <span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
                      </span>
                  </a>
</div>

Hi there, thank you so much for your time. What I meant was a fade in before the image was revealed and also a fade out when leaving the link. Sorry if I was unclear :/ — kieran kieran, Jun 26 '22 at 12:12
I've implemented it in my code and the transition works ! thank you so much :) — kieran kieran, Jun 26 '22 at 12:20

fade in opacity when img spans

1 Answers1