Sufiyan Ahmed• 160
@sufiyan0
Submitted
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-Wangari
All comments
- eve• 230
@Eve-Wangari
Posted
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 helpful
2 - AymenBenYounes• 420
@AymenBenYounes
Submitted
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• 230@Eve-Wangari
Posted
Hi 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 helpful
0 - Alexis Quizhpe• 30
@Arekshiss
Submitted
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• 230@Eve-Wangari
Posted
Hello, 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 - Chamod Perera• 160
@ChamodJ
Submitted
I do not have any idea how to do hover effect on image in this challenge. I hope someone can help me.
eve• 230@Eve-Wangari
Posted
Hi 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 helpful
0 - brunokzz• 40
@brunokzz
Submitted
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• 230@Eve-Wangari
Posted
I 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
