css panel with image and text

Question

I have a css border panel, rendered with this code:

#bor_panel {
border-radius: 12px;
border: 2px solid #297293;
padding: 20px; 
width: 170px;
height: 170px;    
}

and used in a page in this way:

<div id="bor_panel"></div>

I need to put in the panel an image and a text In this way. If I hover the image with the mouse, the image disappears and the text appears. How can I do? I tried different techninques but they lose the position inside the panel. Any idea?

Answer 1

#bor_panel {
  border-radius: 12px;
  border: 2px solid #297293;
  padding: 20px;
  width: 170px;
  height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

#bor_panel:hover img {
  display: none;
}

#bor_panel:hover span {
  margin: auto;
}

<div id="bor_panel">
  <img src="http://placehold.it/170x140">
  <span>Lorem ipsum</span>
</div>