diff --git a/src/public/assets/css/styles.css b/src/public/assets/css/styles.css index 03104aa..654393d 100644 --- a/src/public/assets/css/styles.css +++ b/src/public/assets/css/styles.css @@ -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; diff --git a/src/public/components/InvolveBox.tsx b/src/public/components/InvolveBox.tsx index 514004f..c2c295b 100644 --- a/src/public/components/InvolveBox.tsx +++ b/src/public/components/InvolveBox.tsx @@ -27,7 +27,9 @@ export default class InvolveBox extends Component { className="involve-card" >
{this.props.boxTitle}
- +
+ +
{this.props.description}
@@ -37,7 +39,9 @@ export default class InvolveBox extends Component { return (
{this.props.boxTitle}
- +
+ +
{this.props.description}