@sufiyan0Submitted over 1 year ago
I am unable to add opacity on a picture can any one help me or suggest me how I add opacity on the picture . Your advice is very helpful for me to improve my Frontend skills
Than You
eve
@Eve-WangariAll comments
- @Eve-WangariPosted over 1 year ago
Hi there, my proposed solution is to set the image as your background. Inside your image class add another class which give the background color. remember to set the height and width of the inner class to fit the image class, otherwise it will not show. so your code looks something like this: html:
<div class="image"> <div class="purple"> </div> </div> Good luck and happy coding!Marked as helpful2 - @AymenBenYounesSubmitted over 1 year ago
I have made a single mistake because i didn't know how to apper the cyan color and the eye image at the moment when u click on the image , Can Someone help me with it , i would be happy to know the solution .Thank you and Have a Great Day !
@Eve-WangariPosted over 1 year agoHi there, you can use a transition. Include the view icon and position it where it should be when you hover, add a class with the background color setting the height as it should be when you hover, then set the opacity of the image to 0 set the height of the class with the background to 0 then do a transition opacity to 1 and height to full height. there's some positioning involved. You can try and see my solution here.... https://www.frontendmentor.io/solutions/responsive-and-flex-box-73nELprEIO
Good luck and happy coding.
Marked as helpful0 - @ArekshissSubmitted over 1 year ago
I tried my best but I did not know how to define @media to make it responsive. I tried to use min-width and max-width but I was not sure how to do it.
Thank you for the opportunity.
@Eve-WangariPosted over 1 year agoHello, congratulations for finishing the challenge. I found this video really helpful to understand media queries. Might come in handy for future projects. Happy coding. Here's a link https://www.youtube.com/watch?v=ZYV6dYtz4HA&t=1s
1 - @ChamodJSubmitted over 1 year ago
I do not have any idea how to do hover effect on image in this challenge. I hope someone can help me.
@Eve-WangariPosted over 1 year agoHi there, you can use a transition. Include the view icon and position it where it should be when you hover, add a class with the background color setting the height as it should be when you hover, then set the opacity of the image to 0 set the height of the class with the background to 0 then do a transition opacity to 1 and height to full height. there's some positioning involved. You can try and see my solution here.... https://www.frontendmentor.io/solutions/responsive-and-flex-box-73nELprEIO
Good luck and happy coding.
Marked as helpful0 - @brunokzzSubmitted over 1 year ago
I consider the project to be almost perfectly done... if it were not for the hover effect of the image 😪. That feature of the component complicated much of the development process, and in fact I could not achieve it. I've looked at a lot of websites, forums and other sources of information which recommended properties like
background-color,filterand evenlinear-gradient, but none of them worked 😣😣.I would love to get your recommendations about how to make it well written and achieved, since is the only thing left. Also, if you want, you can give me your feedback about other things of my code. I'll wait your comments!
P.D: I changed the active state for a hover effect, just because I thought it was better :)
@Eve-WangariPosted over 1 year agoI also struggled with that for some time, the way I handled it was by adding a transition. you place view icon with its background in your html in their own class, then you surround that class with another one to enable positioning, then on hover you transition the height and the opacity. you can check my solution here. https://github.com/Eve-Wangari/nft-preview. I hope it helps.
0
