oliverbooth/oliverbooth.dev
oliverbooth/oliverbooth.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

style: add zoom effect on card hover

Browse Source
This commit is contained in:
Oliver Booth 2023-12-26 20:34:21 +00:00
parent f35bcd3a24
commit de41078365
Signed by: oliverbooth
GPG Key ID: E60B570D1B7557B5
1 changed files with 38 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/scss/app.scss
View File

@ -183,19 +183,45 @@ article {
background: #000; background: #000;
box-shadow: 0 0 15px rgba(0, 0, 0, .1); box-shadow: 0 0 15px rgba(0, 0, 0, .1);
.project-image a { &:hover {
&:link, &:visited, &:hover &:active { .project-image {
color: #fff; img {
transform: scale(110%);
}
p.project-title {
font-size: 1.2em;
margin: calc(-35px - .2em) 0 0;
}
} }
} }
.project-image p.project-title { .project-image {
position: relative; overflow: hidden;
bottom: 0;
width: 100%; img {
margin: -34px 0 0; z-index: -2;
padding: 5px; transform: scale(100%);
background-color: rgba(#000, 50%);
transition: transform 500ms;
}
a {
&:link, &:visited, &:hover &:active {
color: #fff;
}
}
p.project-title {
font-size: 1em;
transition: font-size 500ms, margin 500ms;
position: relative;
bottom: 0;
width: 100%;
margin: -34px 0 0;
padding: 5px;
background-color: rgba(#000, 50%);
}
} }
} }
@ -320,7 +346,7 @@ a.brand-linkedin {
} }
table.reading-list { table.reading-list {
th,td { th, td {
vertical-align: middle; vertical-align: middle;
} }
} }