@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