Skip to content

Commit

Permalink
feat: 링크연결
Browse files Browse the repository at this point in the history
  • Loading branch information
@SooY2
SooY2 committed Apr 10, 2024
1 parent 48b8dd5 commit cf3e0c7
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 55 deletions.
111 changes: 56 additions & 55 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,100 +20,101 @@ <h1>숭실대 멋쟁이사자처럼 12기의 TMI.zip</h1>
<main>
<div id="wrapper-layout">
<div class="row-layout">
<div class="wrapper">
<a class="wrapper" href="./CHAEYEON_FE/index.html">
<img src="./CHAEYEON_FE/profile.jpg" alt="채연" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./DAIN_PM/index.html">
<img src="./DAIN_PM/profile.jpg" alt="다인" />
</div>
<div class="wrapper"></div>
<div class="wrapper">
</a>
<a class="wrapper" href=""></a>
<a class="wrapper" href="./GEONHWI_FE/index.html">
<img src="./GEONHWI_FE/myimg.jpg" alt="건휘" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./HAEUN_PM/index.html">
<img src="./HAEUN_PM/박하은_사진.jpg" alt="하은" />
</div>
</a>
</div>
<div class="row-layout">
<div class="wrapper">
<a class="wrapper" href="./HAYEON_DE/index.html">
<img src="./HAYEON_DE/hayeon_img.jpg" alt="하연" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./HAYOON_DE/index.html">
<img src="./HAYOON_DE/" alt="하윤" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./HYUNGJUN_BE/index.html">
<img src="./HYUNGJUN_BE/image.jpg" alt="형준" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./JIHWAN_BE/index.html">
<img src="./JIHWAN_BE/profile.jpeg" alt="지환" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./JIHYO_DE/index.html">
<img src="./JIHYO_DE/profile.jpg" alt="지효" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./JIYEA_PM/index.html">
<img src="./JIYEA_PM/me2.jpg" alt="지예" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./MINJU_FE/index.html">
<img src="./MINJU_FE/my_img.jpg" alt="민주" />
</div>
</a>
</div>
<div class="row-layout">
<div class="wrapper">
<a class="wrapper" href="/MINKYOUNG_BE/index.html">
<img src="./MINKYOUNG_BE/IMG_8807.jpg" alt="민경" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./SANGEUN_BE/index.html">
<img src="./SANGEUN_BE/IMG_SE.jpg" alt="상은" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./SANGWOO_PM/index.html">
<img src="./SANGWOO_PM/photo.jpg" alt="상우" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./SEONJEONG_BE/index.html">
<img src="./SEONJEONG_BE/profile.jpg" alt="선정" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./SEOYUN_DE/index.html">
<img src="./SEOYUN_DE/profile.jpg" alt="서윤" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./SEUNGBIN_PM/index.html">
<img src="./SEUNGBIN_PM/me.jpg" alt="승빈" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./SEUNGHYUN_FE/index.html">
<img src="./SEUNGHYUN_FE/PROFILE.JPG" alt="승현" />
</div>
</a>
</div>
<div class="row-layout">
<div class="wrapper">
<a class="wrapper" href="./SION_FE_2/index.html">
<img src="./SION_FE_2/sion.jpg" alt="시온" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./SOOYEON_FE/index.html">
<img src="./SOOYEON_FE/myimg.jpeg" alt="수연" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./SOOYOUNG_BE/index.html">
<img src="./SOOYOUNG_BE/sooyoung.jpg" alt="수영" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./TAEYEON_DE/index.html">
<img src="./TAEYEON_DE/증명사진.jpg" alt="태연" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./YEONGMYEONG_PM/index.html">
<img src="./YEONGMYEONG_PM/KO.jpg" alt="영명" />
</div>
</a>
</div>
<div class="row-layout">
<div class="wrapper">
<a class="wrapper" href="./YEONJAE_BE/index.html">
<img src="./YEONJAE_BE/yeonjae.jpg" alt="연재" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./YUJUNG_DE/index.html">
<img src="./YUJUNG_DE/yujung.jpg" alt="유정" />
</div>
<div class="wrapper">
</a>
<a class="wrapper" href="./YUNHO_FE/index.html">
<img src="./YUNHO_FE/PatPhoto.jpg" alt="윤호" />
</div>
</a>
</div>
<div class="row-layout">
<div class="wrapper">
<a class="wrapper" href="">
<img src="" alt="" />
</div>
</a>
</div>
</div>
</main>
<script src="./index.js"></script>
</body>
</html>
12 changes: 12 additions & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
document.querySelectorAll('.wrapper').forEach((wrapper) => {
wrapper.addEventListener('mouseover', function () {
const altText = wrapper.querySelector('img')?.getAttribute('alt');
if (altText) {
this.setAttribute('data-alt', altText);
}
});

wrapper.addEventListener('mouseout', function () {
this.removeAttribute('data-alt');
});
});
30 changes: 30 additions & 0 deletions mainStyles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ img {
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
}

/* */
Expand All @@ -57,3 +59,31 @@ img {
justify-content: center;
align-items: center;
}

.wrapper img {
display: block;
transition: opacity 0.5s ease;
}

.wrapper:hover img {
opacity: 0.5;
}

.wrapper::after {
content: attr(data-alt);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
font-size: 16px;
font-weight: 800;
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease, visibility 0.5s;
}

.wrapper:hover::after {
visibility: visible;
opacity: 1;
}

0 comments on commit cf3e0c7

Please sign in to comment.