Aller au contenu
Votre réalité au cœur de nos priorités.
Type your paragraph here
Cliquez ici
.portfolio-item {
position: relative;
width: 300px;
height: 300px;
margin: 20px;
overflow: hidden;
border-radius: 10px;
transition: transform 0.3s ease;
}
.portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
color: white;
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
transition: opacity 0.3s ease;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-item:hover img {
transform: scale(1.1);
}
.portfolio-item:hover {
transform: translateY(-10px);
}
.portfolio-overlay h3 {
font-size: 24px;
margin-bottom: 10px;
}
.portfolio-overlay p {
font-size: 16px;
}
document.querySelectorAll('.portfolio-item').forEach(item => {
item.addEventListener('mouseenter', () => {
item.classList.add('wow-hover');
});
item.addEventListener('mouseleave', () => {
item.classList.remove('wow-hover');
});
});
