Why this works

By layering a semi-transparent overlay and toggling its opacity on hover, we create a smooth and professional way to reveal social media links without additional JavaScript.

Source Code

<div style="position: relative; background: #fff; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden; width: 300px; text-align: center;">
  <img src="https://via.placeholder.com/300x200" alt="Profile" style="width: 100%;">
  <h4 style="margin: 1rem 0 0.5rem 0;">John Doe</h4>
  <p style="margin-bottom: 1rem; color: #6c757d;">Web Developer</p>
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; gap: 1rem; opacity: 0; transition: opacity 0.3s ease;">
    <a href="#" style="color: #fff; font-size: 1.5rem;"><i class="bi bi-twitter"></i></a>
    <a href="#" style="color: #fff; font-size: 1.5rem;"><i class="bi bi-linkedin"></i></a>
    <a href="#" style="color: #fff; font-size: 1.5rem;"><i class="bi bi-github"></i></a>
  </div>
</div>

<style>
.d-flex div:hover div {
  opacity: 1;
}
</style>