hover and animatioin

Question

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 1

thanks