problem with overlay/hover

Hi there

i'm new to programming and trying out some stuff (nothing officieel)

i would like to hover above an image and then see a description of the content (for now, just the message "click") once you click on the image.

so far i've got this: (note that i only copied a small part)

html

<div class="image">
<img src="images/color-palette.jpg" alt="colors">
<img src="images/diy.jpg" alt="diy">
<img src="images/moodboard.jpg" alt="moodboard">
<img src="images/floorplanner.jpg" alt="floorplanner">
<img src="images/style.jpg" alt="stylequiz">
<img src="images/spacing-issues.jpg" alt="spacing issues">
<div id="overlay">
<span id="click">click here</span>
</div>
<div/>

css:

.image {
width: 200px;
height: 280px;
margin: 50px auto;
display: block;
border: solid 3px #FF4567;
overflow:hidden;
}
#overlay {
background:#FF4567;
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
}

.image:hover #overlay {
opacity:1;
}

#click {
font-family: 'Amatic SC', cursive;
font-size: 32px;
text-align: center;}