Submitted about 2 years ago

E-commerce product page solution

Krzysztof Kondracikowski•280

@Chris-ai

Preview site View code

This is a solution for...E-commerce product page

HTML
CSS
JS

3intermediate

Design comparison

SolutionDesign

Solution retrospective

I'm about to start creating my portfolio. This project have been realized as first.

I've created this solution using Vue.js framework, tried to be pixel perfect as possible as I could, but its quite hard when you wokr on jpgs :D

I can't manage to change color of icons on hover/focus, I've used <img> tag. Can someone sent me a quick tip how to do this?

Any opinion is appreciated! Enjoy your day.

Community feedback

Louie•170
@PaletteJackPosted about 2 years ago
Awesome job! The animations look good, especially the cart!

So you aren't able to change the color of the tags on hover since the icons are svgs. What you're looking for is the fill or stroke attribute. Problem is, you can't access this since the picture was added using an img tag.

What you'll want to do is put the SVG markup for the image on the page. Then in your css access the path or SVG tags like so:

svg { fill: white; }

Or if the color is nested in a path tag:

svg path { fill: white; }

It could also be the stroke attribute. This is what I've used in the past. Don't know if this is standard practice. Either way, I hope it helps!
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord