0

I tried to show a centered text when I put my mouse over a image. I found a way to do it with Span but then the Transition does not work. Could someone help me with that ? is there maybe an other way to make a "over centered txt" ?

here is the code:

body {
  margin: 0;
  padding: 0px;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #000000;
  ;
  text-align: center;
}

#content {
  padding-top: 71px;
  transition-duration: 1s;
}

#content a {
  width: 800px;
  display: inline-block;
  position: relative;
  text-decoration: none;
  transition: 1s
}

#content a img {
  border: none;
  width: 100%;
  transition: 1s
}

#content a span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

#content a:hover span {
  display: block;
}

#content span.title {
  display: none;
  color: #FFF;
  font-weight: bold;
  font-size: 1.2em;
  z-index: 2;
  transition: 1s;
}

#content span.bg {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  background: black;
  transition: 1s;
  opacity: 0.5;
}
<div id="content">
  <a href="#">
    <span class="title">Mon titre</span>
    <span class="bg"></span>
    <img src="B 1.jpg" alt="" />
  </a>

</div>
<div id="footer">

</div>

Here is the source of the example that I used

j08691
  • 204,283
  • 31
  • 260
  • 272
Lucien Nicou
  • 1
  • Both of your `transform` properties are identical (`transform: translate(-50%, -50%);` and your `transition` property doesn't list any properties to transition. – Dai Jul 06 '20 at 20:59

1 Answers1

0

As i know , you can not use transition over display property. why you do not use opacity instead?? do something like this

#content a span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity : 0;
transition : opacity 1s ease-in-out;
}

#content a:hover span {
opacity:1;
}

and remove other display and transition.

Amin MG
  • 116
  • 3