How to create hover & expand effect?

[davidr83927187]

Hello,

I'm currently designing a website in Adobe Xd for a company I'm working for and they love it but want to make it an actual website.  I don't have much experience in Dreamweaver so I'd like to know if it's possible to create these effect's (see video) and how difficult it would be to do so.  The company wants to actually use the website as well, for customers to purchase items and browse so I've researching Shopify and you can edit code on there as well, so would that be better to not worry about sales transactions, inventory and all that. Any type of advice/guidance regarding this is welcome.

Thank you,

David 

[Ben M]

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.

[Nancy OShea]

#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. 

[Nancy OShea]

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/