I have been trying to make the p element visible upon hovering over the image, but so far, nothing seems to be happening. The text is initially visible on the page, leading me to believe that the transform property may not be functioning as expected. I've included all the code for this page, including the header code which I'm not sure is necessary but I included it just in case.
Despite looking up similar questions and even asking one myself, I still can't find a solution. I've tried different browsers without any success.
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.inner-header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
}
.logo-container {
height: 100%;
display: table;
float: left;
}
.logo-container h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-size: 32px;
font-weight: 200;
}
.logo-container h1 span {
font-weight: 800;
}
.navigation {
float: right;
height: 100%;
}
.navigation a {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation a li {
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-size: 16px;
}
.navigation a:last-child {
padding-right: 0;
}
.mission {
width: 80%;
height: 350px;
margin: 5px auto;
position: relative;
}
.mission p {
position: absolute;
font-size: 30px;
bottom: 50%;
left: 25%;
transform: scale(0);
transition: .25s ease-in-out
}
.mission img:hover+.mission p {
transform: scale(3);
transform-origin: center;
}
.mission img {
width: 100%;
height: 100%;
position: relative;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./Grid2.css">
<title>Awesome Website</title>
</head>
<body>
<div class="header">
<div class="inner-header">
<div class="logo-container">
<h1>MY<span>SITE</span></h1>
</div>
<ul class="navigation">
<a>
<li>Home</li>
</a>
<a>
<li>About</li>
</a>
<a>
<li>Portgolio</li>
</a>
<a>
<li>Contact</li>
</a>
</ul>
</div>
</div>
<div class="mission">
<img src="./330px-GABRIEL_VELLA_vs_ROMINHO_51.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus nesciunt ratione animi facilis. Quo, et?</p>
</div>
</body>
</html>My expectation is for the text to appear upon hovering, but currently it remains stagnant.