.tooltip:hover .tooltiptext {
    visibility: visible;
}
<center>
#con {
  width: 500px;
  height: 200px;
}
#box1 {
  float: center;
  font-size: 20px;
  color:#757575;
  width: 305px;
  height: 205px;
  background-color: lightgreen;
  border: 6px solid green;
  margin:20px;
}
/* The CSS below is added to hopefully achieve the effect you're looking for. */

#text1 {
  display: none;
}
#box1:hover #text1 {
  display: block;
}
#box1:hover #image {
  display: none;
}
</center>