NFT preview card component

Hi Paul,

You've done a great job. I see you did a beautiful design. Just one thing, please let me tell you how you can make the icon-view.jpg image that you set as background image visible.

First, the image file path:

You can access image files with ./images/....jpg in index.html, but your style.css file is not in the root directory now. The stylesheet's path is ./app/scss/style.css; so you will be able to access image files from there, with ./../../images/icon-view.jpg: you need to come up twice, then come down into the images folder again.

Second, the tag you applied 'opacity: 0.3' to.

You set the background image on the img tag, and applied the opacity(transparent) to the same img tag: it will not work because the img tag has both its own image and background image at once. Solution: move the class .image-equilibrium up to its parent div in index.html. Then create a style .image-equilibrium:hover img, and move opacity: 0.3 into that. Now when you hover the div tag(its dimension will be the same as img tag), the opacity: 0.3 will work just on the image, and the background image on the div tag will show up.

You can see my code:

(index.html)

<main class="card">
<div class="image_equilibrium">
<img src="./images/image-equilibrium.jpg" alt="picture of equilibrium card">
</div>
<h1>Equilibrium #3429</h1>

(style.css)

.image_equilibrium:hover {
background-image: url("./../../images/icon-view.svg");
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
/* move the opacity out into the below one */
}

.image_equilibrium:hover img {
opacity: 0.3;
}