DilinyerCR• 320
@DilinyerCR
Submitted
I do not know how to do the background image color ; (
Umair
@umairanwer
All comments
- Umair• 240
@umairanwer
Posted
Hi, good work on the project. Regarding your query there are a few modifications you need to do in your CSS.
-
In your main class set the background to:
background: url(/images/pattern-background-desktop.svg)no-repeat top/contain; -
What this will do is push your image to the top and contain will force the image to display completely without any cutoff.
-
Now set background-color to pale blue.
-
Finally change your height to 100vh.
Hope this helps. Feel free to ask any questions.
Marked as helpful
1 -
- Harleen Kaur• 40
@harleenkaur1343
Submitted
It would be really helpful if you could suggest an easier approch for making css hover work after the javascript click event is executed on rating?
Umair• 240@umairanwer
Posted
Hi, the issue arises because when you revert the styles using js, the styles of the pseudo classes (:hover) are also set to these styles, thus your hover action stops working. Although you coded the hover effect again using js but a simpler solution is that to reset styles of deselected items by setting their style properties to empty string in js, this way the original css styles will take effect.
ratelist[y].style.backgroundColor = ""; ratelist[y].style.color = "";Now you can remove the hover effect code from js and your page will function as intended.
Marked as helpful
0 - whitehatns• 150
@platypus567
Submitted
Not sure how to make it deselect a button when another is clicked, any advice would be very helpful! Still stuck on that.
Umair• 240@umairanwer
Posted
A good solution to your problem is already provided. There is another solution to this issue, if you want to use
<button>.- In your CSS create styles for a class "selected-btn"
- Set the styles of this class to the ones you selected in your js code (background-color and color). And remove them from js code.
- Now whenever a btn is clicked, first loop through all the buttons and remove 'selected-btn' class from them.
- After this add the 'selected-btn' class to the clicked button.
Hope this helps. Feel free to ask any questions.
1 - Anthony Aligbe• 90
@Meauma13
Submitted
- How did you get the image overlay to display correctly on clicking the centred image?
Umair• 240@umairanwer
Posted
Hi, one of the methods to improve overlay img is to enclose it in a container, and inside this container also add an empty div which will be the cyan-overlay.
Now set cyan-overlay to 100% width and height, its color to cyan and its border radius should match the NFT img's radius. Initially set its opacity to zero.
Set hover tag of img container to change opacity of cyan-overlay to 0.5.
These tips will get the result you need. Please reply if you need any clarification.
Marked as helpful
1
