I want to display the __button when I hover over the __image. But right now, the button has its own hover. It should do this: when the hover from __image is triggered, raise opacity of __button to visible.
Thanks for any help!
&__image {
display:grid
&:hover {
transition: 1s;
transform: scale(1.05);
}
}
&__button {
opacity: 0;
display: grid;
&:hover {
opacity: 1;
}
}
Ah I found one solution.
&__image {
display:grid
&:hover {
transition: 1s;
transform: scale(1.05);
.button {
opacity: 1;
}
}
}
&__button {
opacity: 0;
display: grid;
}
And then in js: className="item__music button item__button"
If this is the layout of your HTML
<div class="item">
<div class="__image" style="height:200px;width: 200px;background-color:red;margin:20px"></div>
<div class="__button" style="height:200px;width: 200px;background-color:red;margin:20px"></div>
</div>
Then this style should do it:
.item {
.__image {
display: grid;
&:hover {
cursor: pointer;
transition: 1s;
transform: scale(1.05);
+ .__button {
opacity: 1;
}
}
}
.__button {
opacity: 0;
display: grid;
&:hover {
opacity: 1;
}
}
}