@polzak
Posted
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;
}
Marked as helpful