Skip to content

Commit

Permalink
Hover effects to the favourites cards.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ch3rryblossom
ch3rryblossom committed Dec 19, 2024
1 parent 12f02a6 commit 6ebe07f
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 35 deletions.
169 changes: 139 additions & 30 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,73 @@
vertical-align: -5px;
}

.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}

.card {
width: 200px;
text-align: center;
border: 4px double #FF90A5;
padding: 10px;
background-color: #191b22;
color: #ffffff;
font-family: 'Comic Sans MS';
position: relative;
overflow: hidden;
}

.card-title {
font-size: 16px;
margin-bottom: 20px;
margin-top: 5px;
}

.image-wrapper {
position: relative;
width: 100%;
height: auto;
}

.card img {
width: 100%;
height: auto;
border: 2px solid #ffffff;
/* margin-bottom: 10px; */
transition: opacity 0.3s ease;
}

.card .hover-text {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
border: 2px solid #ffffff;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(197, 115, 115, 0.8);
color: #ffffff;
font-size: 16px;
opacity: 0;
transition: opacity 0.3s ease;
text-align: center;
padding: 10px;
box-sizing: border-box;
}

.card a {
color: #FF90A5;
text-decoration: underline;
}



/* Smaller Screens */
@media (max-width: 768px)
{
Expand Down Expand Up @@ -200,37 +267,51 @@ <h3> </h3>
<hr>
<p>My favourite stuff:<br></p>

<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-bottom: 20px;">
<!-- TV Show Card -->
<div style="width: 200px; text-align: center; border: 4px double #FF90A5; padding: 10px; background-color: #191b22; color: #ffffff; font-family: 'Comic Sans MS';">
<p style="font-size: 16px; margin-bottom: 20px; margin-top: 5px;">My Favourite TV Show</p>
<img src="assets/about/fleabag.jpg" alt="Favorite TV Show" style="width: 100%; height: auto; border: 2px solid #ffffff; margin-bottom: 10px;">
<a href="https://www.imdb.com/title/tt5687612/" target="_blank" style="color: #FF90A5;">Fleabag</a> <br>by Phoebe Waller-Bridge
</div>

<!-- Movie Card -->
<div style="width: 200px; text-align: center; border: 4px double #FF90A5; padding: 10px; background-color: #191b22; color: #ffffff; font-family: 'Comic Sans MS';">
<p style="font-size: 16px; margin-bottom: 20px; margin-top: 5px;">My Favourite Movie</p>
<img src="assets/about/18x2byd.jpg" alt="Favorite Movie" style="width: 100%; height: auto; border: 2px solid #ffffff; margin-bottom: 10px;">
<a href="https://www.imdb.com/title/tt31039829/" target="_blank" style="color: #FF90A5;">18x2 Beyond Youthful Days</a> <br> Japanese-Taiwanese movie I recently found
</div>
</div>

<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-bottom: 20px;">
<!-- Music Album Card -->
<div style="width: 200px; text-align: center; border: 4px double #FF90A5; padding: 10px; background-color: #191b22; color: #ffffff; font-family: 'Comic Sans MS';">
<p style="font-size: 16px; margin-bottom: 20px; margin-top: 5px;">My Favourite Album</p>
<img src="assets/about/parachutes.png" alt="Favorite Album" style="width: 100%; height: auto; border: 2px solid #ffffff; margin-bottom: 10px;">
<a href="https://open.spotify.com/album/6ZG5lRT77aJ3btmArcykra" target="_blank" style="color: #FF90A5;">Parachutes by Coldplay</a> <br> all-time favourite
</div>

<!-- Song Card -->
<div style="width: 200px; text-align: center; border: 4px double #FF90A5; padding: 10px; background-color: #191b22; color: #ffffff; font-family: 'Comic Sans MS';">
<p style="font-size: 16px; margin-bottom: 20px; margin-top: 5px;">My Favourite Song</p>
<img src="assets/about/aboutyou1975.jpg" alt="Favorite Song" style="width: 100%; height: auto; border: 2px solid #ffffff; margin-bottom: 10px;">
<a href="https://open.spotify.com/track/1fDFHXcykq4iw8Gg7s5hG9" target="_blank" style="color: #FF90A5;">About You by The 1975</a> <br> (current - 15th Dec '24)
</div>
<div class="card-container">
<!-- TV Show Card -->
<div class="card">
<p class="card-title">My Favourite TV Show</p>
<div class="image-wrapper">
<img src="assets/about/fleabag.jpg" alt="Favorite TV Show">
<div class="hover-text">Simply love every single thing about this.</div>
</div>
<a href="https://www.imdb.com/title/tt5687612/" target="_blank">Fleabag</a> <br>by Phoebe Waller-Bridge
</div>

<!-- Movie Card -->
<div class="card">
<p class="card-title">My Favourite Movie</p>
<div class="image-wrapper">
<img src="assets/about/18x2byd.jpg" alt="Favorite Movie">
<div class="hover-text">Found this from a YT MV made for About You - The 1975</div>
</div>
<a href="https://www.imdb.com/title/tt31039829/" target="_blank">18x2 Beyond Youthful Days</a> <br> Japanese-Taiwanese movie I recently found
</div>
</div>

<div class="card-container">
<!-- Music Album Card -->
<div class="card">
<p class="card-title">My Favourite Album</p>
<div class="image-wrapper">
<img src="assets/about/parachutes.png" alt="Favorite Album">
<div class="hover-text">An all-time favorite album, my fave song on this is Sparks</div>
</div>
<a href="https://open.spotify.com/album/6ZG5lRT77aJ3btmArcykra" target="_blank">Parachutes</a> <br>by Coldplay
</div>

<!-- Song Card -->
<div class="card">
<p class="card-title">My Favourite Song</p>
<div class="image-wrapper">
<img src="assets/about/aboutyou1975.jpg" alt="Favorite Song">
<div class="hover-text">Favourite as of 19th Dec '24. Also 'BIRDS OF A FEATHER' by Billie Eilish!</div>
</div>
<a href="https://open.spotify.com/track/1fDFHXcykq4iw8Gg7s5hG9" target="_blank">About You</a> <br> by The 1975
</div>
</div>


<hr>
<p> Other websites on the internet that I like
<ul>
Expand Down Expand Up @@ -279,6 +360,34 @@ <h3> </h3>
<div id="themeToggle" class="light"></div>

<!-- Scripts -->

<script>
// Get all the cards
const cards = document.querySelectorAll('.card');

cards.forEach(card => {
// Select the image and hover-text div inside the image-wrapper
const imageWrapper = card.querySelector('.image-wrapper');
const img = imageWrapper.querySelector('img');
const hoverText = imageWrapper.querySelector('.hover-text');

// When mouse enters the card
card.addEventListener('mouseenter', () => {
// Hide the image and show the hover text
img.style.opacity = '0';
hoverText.style.opacity = '1';
});

// When mouse leaves the card
card.addEventListener('mouseleave', () => {
// Show the image and hide the hover text
img.style.opacity = '1';
hoverText.style.opacity = '0';
});
});
</script>


<script>
window.onload = function() {
// Get the current page's URL
Expand Down
10 changes: 5 additions & 5 deletions blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,21 +270,21 @@ <h4 style="margin: 0; color: #8f8f8f;">Blogged on : 19th Dec 2024</h4>
<div class="image-container" style="display: flex; flex-wrap: wrap; gap: 0px; justify-content: center; margin-top: 15px;">
<figure>
<img src="assets/blog/ngn_iisertvm.png"
alt="IISER TVM campus" title="IISER TVM campus">
alt="IISER TVM campus" title="Credits : me getting up at 6am for a bird-watching walk">
<figcaption>
IISER TVM's campus is so pretty.
IISER TVM's campus was so pretty.
</figcaption>
</figure>
<figure>
<img src="assets/blog/ngn_beach.png"
alt="shanghamugham beach" title="shanghamugham beach">
alt="shanghamugham beach" title="Credits : the homestay being right next to the beach">
<figcaption>
First day at TVM was spent right next to Shanghamugham beach.
Our first day at TVM was spent right next to Shanghamugham beach.
</figcaption>
</figure>
</div>
<p>
Went with Jhilik, Surbhi, Sanika, Prithu, Deb. Jhilik and Deb had talks at the conference, while Surbhi, Sanika and I presented posters.
Went with Jhilik, Surbhi, Sanika, Prithu, Deb. Jhilik and Deb had talks at the conference, while Surbhi, Sanika, Prithu and I presented posters.
We had sooo much fun. My <strike>labmates</strike> friends are so cool.
</p>
<!-- <a href="#" class="more-link">More?</a>
Expand Down

0 comments on commit 6ebe07f

Please sign in to comment.