Skip to content
OverviewSolutions
2
Comments
3
P
Jeff Baldwin
@jbaldwin406

All comments

  • Jeff Baldwin•30
    @jbaldwin406Posted over 1 year ago

    Hey there, first off nice work on the challenge.

    One way of getting the overlay with the view svg is to create a div that holds the view svg, and then set that initially to 0 opacity. Then on hover of the card img, set the overlay opacity to 1, which then will give you the effect you are looking for. In order to get the view icon to not have the opacity effect applied to it, I instead set the background color of the overlay div to rgba in order to give just the background the opacity and not the icon on top of it.

    Hopefully this makes sense, and nice work again

    0
  • Emeka Kelvin•10
    @kelvinSeamountSubmitted over 1 year ago

    Hello all please kindly go through my design and give me feedback, i was unable to add the hover effect on the equilibrium image as i tried but couldn't. i will be glad to get a feedback.

    Responsive nft card challenge

    2
    Jeff Baldwin•30
    @jbaldwin406Posted over 1 year ago

    I struggled with the hover effect too at first. One solution I found is to make an extra 'overlay' div and set it hidden (in my case set the opacity to 0) and then when the image is hovered over, flip that opacity to visible. There are probably some other ways of doing it, but this is what worked for me.

    Example: Here is the html for the overlay.

    <div class="overlay">
      <a href="#">
              <img
                class="hover-view"
                src="./images/icon-view.svg"
                alt="view icon"
              />
      </a>
</div>

    Then in the css set opacity: 0; Also note: There may be another way to do this, but in order to get the view icon to not have the opacity effect applied to it, I instead set the background color of the overlay div to rgba in order to give just the background the opacity and not the icon on top of it.

    Then on hover of the image:

    .card-image:hover .overlay{
    opacity: 1;
    cursor: pointer;
}

    This will show the hover effect you are after!

    Cheers and I hope this wasn't just terrible rambling! Nice job and keep up the good work!

    1
  • Finney•3,030
    @Finney06Submitted almost 2 years ago

    Hello community, please help me out with the white section part of the design, I've been trying to make the blue section flow into the white section. Anyway I could go about it...?

    Mobile first Responsive Result Summary Component

    2
    Jeff Baldwin•30
    @jbaldwin406Posted over 1 year ago

    One way to get it to 'flow' is to create a container div that will hold the blue section and the white section. So your code would have a container div and then inside that div you have one for the blue and one for the white. The white div doesn't has the same background color as the container div, so it looks like it is part of it, while the left side (blue one) has a background color so it looks like it is flowing over top the white. Hopefully that made sense, if not I am happy to explain more in detail.

    0