Skip to content
OverviewSolutions
10
Comments
4
Umair
@umairanwer

All comments

  • Umair•240
    @umairanwerPosted over 2 years ago

    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
    @harleenkaur1343Submitted over 2 years ago

    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?

    Interactive Rating component

    3
    Umair•240
    @umairanwerPosted over 2 years ago

    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
  • Umair•240
    @umairanwerPosted over 2 years ago

    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
  • Umair•240
    @umairanwerPosted over 2 years ago

    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