.image {
  opacity: 1;
  display: block;
  
  width:100%; 
  height:300px;
  transition: .5s ease;
  backface-visibility: hidden;
}

  


.middle {
  transition: .5s ease;
  opacity: 0;
  width:100%; 
  transform: translate(0%, -200%);
 
 
  text-align: center;
}
#read_review{
  background-color: #04AA6D;
  color: white;
  width:40%;
  transform: translate(80%, 0%);
  text-align: center;
  font-size: 10px;
  

}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #04AA6D;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
}