Projects
A collection of work across multiple intersection of design.
All / Researchs / Visualisations
{
font-family: 'Inter', sans-serif;
background-color: #f7fafc; /* A light gray background */
}
/* Custom CSS for the image hover effect and overlay */
.project-card {
position: relative;
overflow: hidden;
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4); /* Dark overlay */
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease-in-out;
pointer-events: none; /* Allows clicks to pass through */
}
.project-card:hover .project-overlay {
opacity: 1;
}
.project-title {
color: white;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
transform: translateY(10px);
transition: transform 0.3s ease-in-out;
}
.project-card:hover .project-title {
transform: translateY(0);
}
.project-image {
transition: transform 0.3s ease-in-out;
width: 100%;
height: 100%;
object-fit: cover;
}
.project-card:hover .project-image {
transform: scale(1.02); /* Slight zoom effect on hover */
}
}
/* Style for the container */
.image-container {
position: relative; /* This is crucial for positioning the overlay text */
display: inline-block; /* Or block, depending on your layout needs */
overflow: hidden; /* Ensures text doesn't spill out */
/* You can add a width and height here if you want a fixed size */
}
/* Style for the hover text container */
.overlay-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(150, 150, 150, 0.7); /* Semi-transparent black background */
color: white;
display: flex; /* Centers the content */
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
opacity: 0; /* Initially hidden */
visibility: hidden; /* Also hidden from screen readers and pointer events */
transition: opacity 0.3s ease; /* Smooth transition effect */
}
/* Style for the hover text itself (optional) */
.overlay-text h3 {
margin: 0;
font-size: 1.5rem;
}
.overlay-text p {
margin: 10px;
padding: 0 10px;
}
/* The magic: show the overlay on hover */
.image-container:hover .overlay-text {
opacity: 1;
visibility: visible;
}
