mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-16 14:33:10 +00:00
43 lines
896 B
SCSS
43 lines
896 B
SCSS
// add zoom animation with opacity change on card img hover
|
|
// source: https://stackoverflow.com/a/43816376
|
|
|
|
.card-img-wrap {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.card-img-wrap::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
opacity: 0;
|
|
transition: opacity 0.25s;
|
|
}
|
|
|
|
.card-img-wrap img {
|
|
transition: transform 0.25s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.card-img-wrap:hover img {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.card-img-wrap:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.project-card {
|
|
transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow, 0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.project-card:hover {
|
|
transform: scale(1.01);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
|
|
}
|