Changing the way our products behaves when hovering over them

Dear community, thank you for taking the time to read this. Hopefully someone can help with this fairly simple task. What I am trying to do is change how my products look on my product pages: [login to view URL] [login to view URL] Currently when you hover over the image, a white box slides up with the information and an Add to cart or "select options" button appearing on it. I don't like this at all and would like to change this a bit. First there would be a blue box appearing over the image when I hover on it (not sliding up but appearing) much like on freelancer has on their homepage: https://www.freelancer.com/ under the "Hire Freelancers and Find Freelance Jobs Online" section. Then there would be two buttons, one for more information and one for adding to cart. Just the icon would appear, and then when you hover over it, the "read more" or "add to cart" text would come up. I have attached a Photoshop design for what we are going for (comparison of how it is now and how it would be). Once you hover over a button, it would change colour to orange and grow in size a little. Hope this makes sense and all the best!