Skip to content

feat: added hover effect in footer's social media icons #2087

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sumesh-singh wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: added hover effect in footer's social media icons #2087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 79 additions & 5 deletions components/Footer/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@ import React from "react";
import { Container, Row, Col } from "reactstrap";
import classes from "./footer.module.css";
import Link from "next/link";
import {
RiYoutubeFill,
RiYoutubeLine,
RiGithubFill,
RiGithubLine,
RiLinkedinFill,
RiLinkedinLine,
RiTwitterLine,
} from "react-icons/ri";
import NewTwitterLogo from "../UI/NewTwitterlogo";

const Footer = () => {
const date = new Date();
Expand All @@ -13,11 +23,75 @@ const Footer = () => {
<Container>
<Row>
<Col lg="12">
<div className={`${classes.footer__copyright}`}>
<p>
&copy; Copyright {year} - Developed by Piyush Garg. All right
reserved.
</p>
<div className={`${classes.footer__social_wrap}`}>
<div className={`${classes.footer__social} ${classes.social__links}`}>
<Link
aria-label="Youtube Channel"
href="https://youtube.com/@piyushgargdev"
target="_blank"
rel="noopener noreferrer"
className={classes.social__item}
>
<span className={classes.icon_outline}>
<RiYoutubeLine />
</span>
<span className={classes.icon_fill}>
<RiYoutubeFill />
</span>
</Link>

<Link
aria-label="Github Profile"
href="https://github.com/piyushgarg-dev"
target="_blank"
rel="noopener noreferrer"
className={classes.social__item}
>
<span className={classes.icon_outline}>
<RiGithubLine />
</span>
<span className={classes.icon_fill}>
<RiGithubFill />
</span>
</Link>

<Link
aria-label="Twitter Account"
href="https://twitter.com/piyushgarg_dev"
target="_blank"
rel="noopener noreferrer"
className={classes.social__item}
>
<span className={classes.icon_outline}>
<RiTwitterLine />
</span>
<span className={classes.icon_fill}>
<NewTwitterLogo />
</span>
</Link>

<Link
aria-label="LinkedIn Profile"
href="https://www.linkedin.com/in/piyushgarg195/"
target="_blank"
rel="noopener noreferrer"
className={classes.social__item}
>
<span className={classes.icon_outline}>
<RiLinkedinLine />
</span>
<span className={classes.icon_fill}>
<RiLinkedinFill />
</span>
</Link>
</div>

<div className={`${classes.footer__copyright}`}>
<p>
&copy; Copyright {year} - Developed by Piyush Garg. All right
reserved.
</p>
</div>
</div>
</Col>
</Row>
Expand Down
79 changes: 79 additions & 0 deletions components/Footer/footer.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,85 @@
text-align: center;
}

/* Social icons in footer */
.footer__social_wrap {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
padding: 1rem 0 2rem 0;
}

.footer__social {
display: flex;
gap: 0.75rem;
align-items: center;
justify-content: center;
}

.social__links {
/* kept for compatibility with other styles */
display: flex;
gap: 0.75rem;
}

.social__item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
color: #9aa4bf;
text-decoration: none;
position: relative;
transition: transform 160ms ease, color 160ms ease;
}

.social__item:hover {
transform: scale(1.06);
color: var(--site-theme-color);
}

.social__item:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.icon_outline,
.icon_fill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
line-height: 1;
transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
}

/* outlined visible by default, filled hidden */
.icon_outline {
opacity: 1;
transform: scale(1);
}

.icon_fill {
position: absolute;
opacity: 0;
transform: scale(0.92);
}

/* On hover: swap icons, add subtle glow */
.social__item:hover .icon_outline {
opacity: 0;
transform: scale(0.9);
}

.social__item:hover .icon_fill {
opacity: 1;
transform: scale(1);
filter: drop-shadow(0 6px 12px rgba(2, 210, 153, 0.08));
}

@media only screen and (max-width: 768px) {
.footer__top {
display: none;
Expand Down
Loading
Loading