CSS's transition's ease-in-out doesn't seem to work

Question

I have a simple overlay of text over an image, darkening the background in the process. I used transition with ease-in-out, but it doesn't seem to ease out properly.

I know that the ease-in-out should be applied to the thing itself, and not its pseudo of :hover, but it doesn't seem to want to work. I have tried many ways, moving it around, deleting stuff, adding stuff, but nothing seems to make sense. I notice the text do ease out fine, but the background with rgba opacity doesn't co-operate. It just snaps back :(

Do refer to a live version at http://g4stly.com/staff.html to know what I'm talking about, specifically.

Thanks in advance!

My code is as follows:

#g4stly
			{
			background-image: url('http://g4stly.com/images/users/g4stly.jpg');
			}

.textFrame
			{
			text-align: center;
			font-size: 20px;
			color: #DDAA49;
			text-decoration: none;
			background-repeat: no-repeat;
			background-size: cover;
			border-radius: 30%;
			width: 250px;
			height: 250px;
			}
			
.textFrame p
			{
			opacity: 0;
			height: 75%;
			margin: 0;
			border-radius: 30%;
  		transition: opacity 300ms ease-in-out;
			}
			
.textFrame p a
			{
			text-decoration: none;
			color: #976649;
			font-size: 25px;
			}
			
.textFrame:hover p
			{
			opacity: 1;
			background: rgba(0,0,0,0.8);
			}
			
.textFrame p:first-child
			{
			padding: 25% 0 0 0;
			}

<div id="g4stly" class="textFrame textFrameLeft">
		<p><a href="http://steamcommunity.com/profiles/76561198068338533/" target="_blank">g4stly</a><br><br>
		Owner of everything g4stly related<br>
		Basically, the boss.</p>
	</div>

Answer 1

I noticed you updated the code. Looks like your issue has already been solved.

The .textFrame p was only applying transition for opacity, so you couldn't see the background transition. I seed you added background .... to the transition, you could also do:

transition: all 1000ms ease-in-out;

Another option would be to move the rgba background to inside the .textFrame p, so the background wouldn't suddenly disappear, fading out along with the rest of the element.

Hopefully this helps you understand the cause :)