Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
29
Comments
2

Islam Soliman

@simokitkat440 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

TypeScript

Latest solutions

  • React + Typescript

    #react#typescript

    Islam Soliman•440
    Submitted 12 months ago

    0 comments
  • Islam Soliman Personal Portfolio

    #react#react-router#redux#sass/scss#vite

    Islam Soliman•440
    Submitted about 1 year ago

    0 comments
  • APIs

    #react#sass/scss

    Islam Soliman•440
    Submitted about 1 year ago

    0 comments
  • SCSS + React

    #react#sass/scss

    Islam Soliman•440
    Submitted over 1 year ago

    0 comments
  • Auto detecting color scheme dev finder!

    #react#sass/scss

    Islam Soliman•440
    Submitted over 1 year ago

    0 comments
  • Custom hooks and SCSS mixins

    #sass/scss#react

    Islam Soliman•440
    Submitted over 1 year ago

    1 comment
View more solutions

Latest comments

  • Rafa•80
    @Pseidu
    Submitted almost 3 years ago

    NFT preview card component solution. HTML, CSS

    1
    Islam Soliman•440
    @simokitkat
    Posted almost 3 years ago

    you could add an overlay empty div in the .img-container div and after that, you give the .img-container {position:relative} and the overlay div will be styled as { position:absolute; inset: 0; background-color: /* the hover color */; display: none;}

    and upon hovering over the img-container the overlay div will be {display:block}

    also you can give the eye icon {position:absolute;} and then give z-index of 2 or more to be over the overlay div after all.

    I hope you find this helpful

    Marked as helpful
  • xenovialara•80
    @xenovialara
    Submitted almost 3 years ago

    API-ADVICE-GENERATOR

    1
    Islam Soliman•440
    @simokitkat
    Posted almost 3 years ago

    you can give the #content {position :relative} and give the button { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); }

    and it will be fixed at center bottom of the parent div

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub