How to create hover & expand effect?

I did this proof of concept a long time ago.  The button animation is all CSS with a little jQuery code to show/hide panel content.

https://jsfiddle.net/NancyO/hGS2Y/

#1 Hover effects don't work on touch screen devices which have no mouse.  Better to use onClick event triggers instead. 

#2 How much client-side and server-side programming have you done?  Do you have experience with web standards and best practices for responsive web design?  Which frameworks (Bootstrap, jQuery, Vue, React, etc...) have you used.

#3 I prefer to use 3rd party PCI compliant shopping carts because it's less legal risk for me as a developer and safer for the merchant and customers. If something goes wrong, let the shopping cart deal with the problem. 

Any of it is certainly possible, but it will require coding, and depending on if you are storing the catalog in a database vs. hard coding onto the page will dictate the complexity of your project.  If you are a designer, I would recommend having your company look into hiring an agency or a programmer who can help develop the site and effects you are looking for.  Sometimes developers may opt for javascript frameworks like vue/react to develop these types of applications and interactivity.  Also with companies like Shopify, you might not have the flexibility in the code to do what you need and you may need to consider your own hosting options, potentially tying into an ecommerce solution for the payment/compliance piece.