Webmaster/old-ieeeucsd-org
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

involve card: zoom pic on hover

Browse source
This commit is contained in:
JilianaTiu 2022-11-06 12:12:26 -08:00
parent d548891c03
commit 94ea266698
2 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/public/assets/css/styles.css
View file

@ -248,17 +248,36 @@ a:hover {
margin: 1em;
}
.involve-img {
display: inline-block;
margin: 20px;
overflow: hidden;
border-radius: 0.2em;
}
.involve-card img {
display: block;
transition: transform 0.4s;
width: 20em;
border-radius: 0.2em;
}
.involve-card:hover img {
transform: scale(1.1);
transform-origin: 50% 50%;
}
.involve-title {
font-size: 3em;
color: var(--main);
margin-bottom: 0.5em;
}
.involve-card > img {
/* .involve-card > img {
width: 20em;
margin-bottom: 1em;
border-radius: 0.2em;
}
} */
.links {
font-size: 1.5em;

8
src/public/components/InvolveBox.tsx
View file

@ -27,7 +27,9 @@ export default class InvolveBox extends Component<InvolveBoxProps> {
className="involve-card"
>
<div className="involve-title">{this.props.boxTitle}</div>
<img src={this.props.image}></img>
<div className="involve-img">
<img src={this.props.image}></img>
</div>
<div className="involve-description">
{this.props.description}
</div>
@ -37,7 +39,9 @@ export default class InvolveBox extends Component<InvolveBoxProps> {
return (
<div className="involve-card">
<div className="involve-title">{this.props.boxTitle}</div>
<img src={this.props.image}></img>
<div className="involve-img">
<img src={this.props.image}></img>
</div>
<div className="involve-description">
{this.props.description}
</div>