이미지 hover시 글자 나타나게 하는 법

 

.text {
  opacity: 0;
}

.scale:hover .text {
  opacity: 1;
  top:50%;
  left:50%;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  /* padding: 16px 32px; */
}

.scale {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition: all 0.3s ease-in-out;   /* 부드러운 모션을 위해 추가*/
}
.scale:hover {
  transform: scale(1.6);
  -webkit-transform: scale(1.6);
  -moz-transform: scale(1.6);
  -ms-transform: scale(1.6);
  -o-transform: scale(1.6);
  opacity: 0.3;
}

.scale:hover .text {
  opacity: 1;
  top:50%;
  left:50%;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  /* padding: 16px 32px; */
}