Looking to hire developers?
@ttoomas
@purplejragon
Submitted
How do you center the text next to the logos? I added some padding to the top to fake it, but I want to know how to actually center the text vertically. vertical-align: middle; and vertical-align: center; don't seem to work.
@ttoomas
Posted
Hi, great job on this site!
You can center the text next to the logo using the flexbox: .avatar-text {display: flex; align-items: center} align-items
Otherwise, I recommend trying the following for the background image: Create a parent <button> that will have position: relative. Then create a pseudo-element :: before for this button, which will have content: url ("picture") position: absolute, opacity: 0 and center it with display: flex (picture view) . Then add only <img> to <button>. Then you do button:hover::before and add opacity: 1.
I hope my advice helped.
Marked as helpful
@inesriahi
Submitted
Hi, I have implemented the hovering effect over the image using another div that changes its opacity when the link hovers. However, I think that this is not the best way to do this, maybe using pseudo-elements is better. I tried to implement this but the ::after element is not displayed.
Please tell me some advice regarding this.
Also, when the image hovers, you may notice a bar under the image that is covered by the overlay. I don't know why it is showing although I am setting all the margins and paddings to 0.
I appreciate your help, Thank you in advance
@ttoomas
Posted
Hi. I write in advance, I'm not an expert, I don't know if it's right, but you can try it.
Create a parent <button> that will have position: relative. Then create a pseudo-element :: before for this button, which will have content: url ("picture") position: absolute, opacity: 0 and center it with display: flex (picture view) . Then add only <img> to <button>. Then you do button:hover::before and add opacity: 1.
I hope my advice helped!
Marked as helpful
@ttoomas
Submitted
This is my third challenge from a frontend mentor. This challenge was really simple! Even without figma files, I tried to mimic the look of the card as much as possible.
@ttoomas
Posted
In the last edit, I noticed that when I hover over the text "
Jules Wyvern "is not just to change the color of the text, but to add a border around the image. Using a simple Js, I added an" active "class as I hover over the text, which simply adds a border around the image.
I was just wondering, could it be done without js, using :hover?
