My goal is to show text when hovering over a logo, but the text and logo are in different divs. Despite trying various solutions like using display: none and display: block, I still can't get it to work.
import styles from '../styles/Float.module.css'
export default function Connection(){
return(
<div className={styles.container}>
<div className={styles.float}>
<a href="https://github.com/YasamanForouzesh" target="_blank">
<img className={styles.github} src="/GitHub.png"/>
</a>
</div>
<h1 className={`${styles["h1"]} ${styles["githubT"]}`}>GitHub</h1>
</div>
)
}
In my CSS file, I have defined grid layouts for the container and float elements. I also attempted to use the :hover pseudo-class to make the text visible when hovering over the logo, but it didn't work as expected.
.container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
position: fixed;
right: 0;
margin-right: 20px;
bottom: 0;
margin-bottom: 40px;
}
.float {
grid-column: 2;
grid-row: 1/4;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto auto;
justify-content: center;
border-radius: 30px;
background-color: rgb(112, 100, 200);
opacity: 0.5;
width: 40px;
}
.github {
width: 30px;
height: 30px;
grid-row: 2;
margin-top: 20px;
}
.githubT {
grid-column: 1;
grid-row: 2;
visibility: hidden;
}
.github:hover .githubT {
visibility: visible;
}
You can view my code on CodeSandbox: https://codesandbox.io/s/unruffled-violet-nklue?file=/pages/index.js