Hoverable Team Social Icons

[SrishtiSonam]

Description

Currently, when we scroll over the 'meet the team' section, we immediately see the links icon, which doesn't create an appealing visual effect.

For this my alternative idea:

Before hovering over the image, only the image itself will be visible.
However, upon hovering, the image will reveal social icons overlaid on top of it.
Clicking on these icons will direct users to the respective team member's social media profiles.

Steps to reproduce

Basically an example of my idea.
Before hover, over the image =>
only the image will be visible.
After Hover =>
image will have social icons in front of them, which will on click move to their handles.

Screenshots

Before:

After:

Code Sample

This is the example of code of my past here.
In this adding css and js results in the required changes as shown in the image above.
          <div class="MemberContainer">
            <div class="Member">
              <div class="MemberImg"><img src="assets/img/team/memberName1" alt="" />
                <div class="Social">
                  <div class="SocialLinks">
                    <ul>
                      <li><a href="..." target="_blank"><span class="fab fa-internet-explorer" data-fa-transform="grow-3"></span></a></li>
                      <li><a href="..." target="_blank"><span class="fab fa-wpexplorer" data-fa-transform="grow-3"></span></a></li>
                      <li><a href="..." target="_blank"><span class="fab fa-linkedin-in" data-fa-transform="grow-3"></span></a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <h5 class="memberName">Prof. Shizoka Nohara</h5>
              <h6 class="memberPosition">Major Contributor</h6>
              <h6 class="memberProf">SDE4 at abc</h6>
            </div>
          </div>

Setup

• Mermaid version:
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

No response

Additional Context

Please assign this issue to me under hacktoberfest.

[surajvast1]

Hey @SrishtiSonam Can you assign me this I would Love to work on this

[surajvast1]

I think its a good idea though i can implement in much effective way

[surajvast1]

I have some issues in setting up the project can you help me with it

[SrishtiSonam]

@surajvast1 I appreciate your willingness to help, but I believe I am well-equipped to handle this task on my own.