Using transitions with span? [duplicate] - html

Question

This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 2 years ago.
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

Answer 1

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.