hover effect in the images with text

Question

how can I give hover and animation in my images with text

Answer 1

Can you elaborate?

Where would you like the text? What kind of animation are you trying to create?

i.e. Square image that fades opacity with text overlaying the image?

Answer 2

Rhys thanks for answering
i have this code
the css is
.shapes {
margin: 60px auto 0;
width: 800px;
display: table;
}

.shape {
display: table-cell;
horizontal-align: middle;
vertical-align: middle;
text-align: center;
padding: 50px;
font-size: 18px;
}
.shape1 {
display: table-cell;
horizontal-align: middle;
vertical-align: middle;
text-align: center;
padding: 50px;
font-size: 18px;
}
.image1{
width: 161px;
height: 161px;
border-radius: 15px;
display: table-cell;
horizontal-align: middle;
vertical-align: middle;
background-color: #69d2e7;
}
.image2{
width: 161px;
height: 161px;
border-radius: 15px;
display: table-cell;
horizontal-align: middle;
vertical-align: middle;
background-color: white;
}

.image2:hover img{
background: white;
}

.image2:hover {
background-color: #69d2e7;
}
.image1:hover img{
background: #69d2e7;
}
.image1:hover {
background-color:white;
}
.imagepara:hover {
background: #69d2e7;
}
the html is
<div class="shapes">
<div class="shape">
<div class="image2">
<img src="images/shape-9.png"
alt="shape-9.png"></div>
<div class="imagepara">
<p>tincidunt sed tellus<br>
ut rutrum</p></div>
</div>
<div class="shape1">
<div class="image1">
<a><img src="images/shape-71.png" alt="shape-71.png"></a>
</div>
<div class="imagepara">
<p>tincidunt sed tellus<br>
ut rutrum</p></div>
</div>
<div class="shape">
<div class="image2">
<a><img src="images/shape-8.png" alt="shape-8.png"></a>
</div>
<div class="imagepara">
<p>tincidunt sed tellus<br>
ut rutrum</p></div>
</div>
</div>
</div>
</div>
please add animation along with the hover. i want a slow change in background color and a button like look in animation

Answer 3

You need to use JavaScript in order to get this result.