Display background-image on page when hovering button Css - html

Question

I've been trying to set the background image of my outer container by having the image transition into the background of my website. But nothing displays, is there something im missing in the css that would allow me to display the background image?
Pen: https://codepen.io/chriskaram/pen/BwVXGq
Page: https://mydietgoal.com/mydietgoal-features-and-plans/
<div class="outer-container" id="backgroundDiv" style="width: max-content; height: max-content;">
<div class="container container1">
<div class="w-table">
<div class="w-table-cell">
<div class="w-container">
<div class="w-card color-green">
<div class="card-header">
<div class="w-title" style="cursor:default">
<h2><font size="7px">Novice</font></h2>
</div>
<div class="w-price" style="cursor:default">
$4.99
<h3>/ Week</h3>
</div>
<div class="container-button">
<a class="w-button" id="btn1" href="/meal-planner" target="_blank">Sign up </a>
</div>
</div>
<div class="card-content" style="cursor:default">
<div class="w-item" style="cursor:default">
<span>Weekly </span>Meal Plans
</div>
<div class="w-item" style="cursor:default">
<span>Personal </span>Dietary Assessment and Advice
</div>
<div class="w-item" style="cursor:default">
<span>Full </span>Access to the Food Catalogue
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container container2">
<div class="w-table">
<div class="w-table-cell">
<div class="w-container">
<div class="w-card color-blue">
<div class="card-header">
<div class="w-title" style="cursor:default">
<h2><font size="7px">Novice</font></h2>
</div>
<div class="w-price" style="cursor:default">
$9.99
<h3>/ Week</h3>
</div>
<div class="container-button">
<a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
</div>
</div>
<div class="card-content" style="cursor:default">
<div class="w-item" style="cursor:default">
<span>Weekly </span>Meal Plans
</div>
<div class="w-item" style="cursor:default">
<span>Personal </span>Dietary Assessment and Advice
</div>
<div class="w-item" style="cursor:default">
<span>Full </span>Access to the Food Catalogue
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container container3">
<div class="w-table">
<div class="w-table-cell">
<div class="w-container">
<div class="w-card color-orange">
<div class="card-header">
<div class="w-title" style="cursor:default">
<h2><font size="7px">Novice</font></h2>
</div>
<div class="w-price" style="cursor:default">
$4.99
<h3>/ Week</h3>
</div>
<div class="container-button">
<a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
</div>
</div>
<div class="card-content" style="cursor:default">
<div class="w-item" style="cursor:default">
<span>Weekly </span>Meal Plans
</div>
<div class="w-item" style="cursor:default">
<span>Personal </span>Dietary Assessment and Advice
</div>
<div class="w-item" style="cursor:default">
<span>Full </span>Access to the Food Catalogue
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

This block of code
#btn1:hover + .outer-container {
background-image: url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd720f5e2317170edb5bf/1507579681913/vegetables-fresh-healthy-food-my-diet-goal-hd.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
means when #btn is :hover, the next direct sibling with .outer-container gets background-image.
However, according to your code, .outer-container is the grand grand grand grand grand grand grand grandparent of #btn. So it will not work.
Bad news is, CSS has no way to select ancestors.
So I suggest you use JavaScript to do it.
Working Example

Answer 2

CSS only allows descendant and sibling selectors, it does not support applying styles to a parent. https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
To achieve this effect, you would want a div at the same level as the button with the hover trigger that is positioned, fixed or absolute (you will need to change your markup to support absolute)
Here is an example:
.bg,
.bg2 {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 100%;
z-index: -1;
}
#btn1:hover + .bg,
.bg2 {
background-image: url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd720f5e2317170edb5bf/1507579681913/vegetables-fresh-healthy-food-my-diet-goal-hd.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: opacity 0.5s;
}
.bg2 {
opacity: 0;
}
#btn2:hover ~ .bg2 {
opacity: 1;
}
I also added an opacity transform for the second button as I feel it is less jarring.
https://codepen.io/jaylandro/pen/qPypmb