Style Items

pmallol · Apr 28, 2020 · 0cb7f04 · 0cb7f04
1 parent 1678c06
commit 0cb7f04
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/components/Item.js b/components/Item.js
@@ -7,8 +7,8 @@ const Item = (props) => {
  <div className={styles.item}>
  <Link href="/[id]" as={`/${props.name}`}>
  <a>
- <img src={props.image} />
- <h1>{props.name}</h1>
+ <div style={{backgroundImage: `url(${props.image})`}} ></div>
+ <p>{props.name}</p>
  </a>
  </Link>
  </div>

diff --git a/components/item.module.scss b/components/item.module.scss
@@ -1,3 +1,20 @@
-.item img {
- width: 50%;
+@import '../styles/variables';
+
+.item {
+ width: 100%;
+
+ div {
+ background-size: cover;
+ height: 10rem;
+ border-radius: 20px;
+
+ &:hover {
+ -webkit-filter: grayscale(100%);
+ filter: grayscale(100%);
+ }
+ }
+
+ a:hover {
+ color: $black;
+ }
 }