CSS hover

HTML:
<!DOCTYPE html>
<html lang="pl" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>FC Barcelona</title>
    <link rel="stylesheet" href="style.css"/>
</head>
  <body>
    <div id="header"> <h1>FC Barcelona</h1> </div>
    <div id="container">


<div class="all">
  <a  href="#"><img class="pictureleft" src="image/lm10.jpg"/></a>
  <a class="click" href="#"><p>Lionel Messi</p></a>
</div>
 </div>
  </body>
</html>

CSS:

body{
  background-color: #34337D;
}
#header{
  width: 1000px;
  min-height: 100px;
  margin: auto;
  text-align: center;
  letter-spacing: 5px;
  font-size: 25px;
  color: #C00000;
}

#container{
  padding: 0;
  width: 1000px;
  min-height: 800px;
  margin: auto;
}

.all{
  position: relative;
  width: 480px;
  height: 325px;
}
.pictureleft{
  float: left;
  width: 480px;
  height: 325px;
  transition: 1s;
  border-radius: 50px;
}
.pictureleft:hover{
  transition: 1s;
  border-radius: 15px;
  transform: scale(1.1);
}
.all .click{
  position: absolute;
  display: block;
  width: 480px;
  height: 65px;
  background-color: #111;
  opacity: 0;
  left:0;
  bottom:0;

}
.all:hover .click{
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff00;
  bottom: -12.5px;
  font-size: 32px;
  transform: scale(1.1);
  transition: 1s;
  border-radius: 0px 0px 15px 15px;
  text-decoration: none;
}