Kenneth Obeng• 50
@obengkenneth
Submitted
Please I need help on how to overlay the card image with the view svg on hover.
P
Jeff Baldwin
@jbaldwin406
All comments
- PJeff Baldwin• 30
@jbaldwin406
Posted
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
@kelvinSeamount
Submitted
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.
PJeff Baldwin• 30@jbaldwin406
Posted
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
@Finney06
Submitted
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...?
PJeff Baldwin• 30@jbaldwin406
Posted
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
