We Keep Coding

Need help to hover different background images in wordpress HTML code

I want exactly like this website: https://www.petzl.com/INT/en
I have displayed background video, 3 texts, by hovering on them the images are changing + links to access them.
But by hovering the text, petzl.com website have activated different images on hover, sometimes different images are appearing on hover.
Can I achieve the different images by css or need to have js or anything? Also need to have span/div elements to appear in one line.
My website link: beta.edgerope.com
Please find code below:
Below is the code, I have added as HTML shortcode in the page and in the background video is displayed
<style>
.image{
height: 800px;
width: 100%;
display: grid;
place-content:center;
justify-content:middle;
color: white;
font-size:30px;
background-color: #;
background-position: center;
background-size: cover;
}
.training{
display:inline-block;
padding-top: 50px;
padding-right: 1500px;
padding-bottom: 50px;
padding-left: 1px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
display: inline-block;
}
.div{
dipslay
}
</style>
<div class="image">
<div class="services">
<span class="services" onclick="window.location=''">Services</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ">
</div>
<div class="Training">
<span class="training" onclick="window.location='beta.edgerope.com/courses'">Training</span>
<img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
<div class="shop">
<span class="shop" onclick="window.location='beta.edgerope.com/shop'">Shop</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>
:

There are many ways to acomplish this, and you should be able to do this with pure css and html.
I've made an example that uses css pseudo elements in order to display the correct image when hovering the sections/links. Also changed up to use a tags instead of using onclick="window.location" as you did.
Here you can change/set the default image in the #hero selector
<style>
/* Styling for the default hero */
#hero {
height: 800px;
width: 100%;
display: flex;
color: black;
background-color: #000;
}
/* Wrapper for all the sections */
.hero-sections {
width: 100%;
height: 100%;
position: relative; /* Allows to change the z-index, and */
z-index: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 2rem;
}
/* Container for the image */
.hero-image::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1; /* Allows the image to appear behind the text */
pointer-events: none; /* Prevent image to show when hovering the ::after element*/
background-image: var(
--bg-url
); /* Uses the images set by the html (css variable) */
opacity: 0; /* Hides the image when it's not active */
transition: opacity 0.5s; /* Adds a fade transition to the opacity*/
}
/* Styles when the the user hovers or has focus on the buttons/links */
.hero-image:is(:hover, :focus-within)::after {
opacity: 1; /* Change the opacity when the text is active/in hover */
}
/* Styles the buttons/links */
.hero-cta {
color: white;
text-decoration: none;
font-size: 2rem;
}
</style>
<div id="hero">
<div class="hero-sections">
<div
class="services hero-image"
style="
--bg-url: url(https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ);
"
>
<a class="hero-cta" href="#">Services</a>
</div>
<div
class="training hero-image"
style="
--bg-url: url(https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg);
"
>
<a class="hero-cta" href="beta.edgerope.com/courses">Training</a>
</div>
<div
class="shop hero-image"
style="
--bg-url: url(https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ);
"
>
<a class="hero-cta" href="beta.edgerope.com/shop">Shop</a>
</div>
</div>
</div>
If you would like to go more advanced here I would recommend implementing some javascript handling mouseenter and mouseleave. As you said you used Wordpress you could also use the .hover() from jQuery.

Height of Element Issue

I have the following code:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
}
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>Resumè
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/1QQ3lCOVEBd551AuNOA-XA4x6s1I3AaCZ/preview" width="100%" height="1070"></iframe>
</div>
</div>
</section>
So on my end since I have the above code embedded in a website, the output looks like this:
However, when I view the website using a smaller screen, I am getting this output:
The problem is that the "template" (which is the grey part) extends to height: 1070 even on responsive mode. I want the grey part to end after the document with some margin like shown in the very first picture when you view it on a smaller device.
Expected Output:
Larger Screen
Same picture as the very first picture I sent, so no changes here really.
Smaller Screen:
The Blue Line is where the grey part should end, with some margin in between the document and grey part, as there is at the top. Any suggestions on how I can accomplish this?

I believe something like this:
made a class for the iframe, for the media query I put 140vw
why 140vw? the ratio of an A4 paper is around 1.4 (if you know its some other format... just change the ratio...) this means the height is 1.4 the width, so you can use that instead of a number as you're doing in the default settings.
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 140vw;
}
}
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>Resumè
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/1QQ3lCOVEBd551AuNOA-XA4x6s1I3AaCZ/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>

Dot leaders with picture background

So I'm building a website for a restaurant and I'm in a pickle. I'm trying to create the menu there. The idea is to align the food name to the left, the price to the right and fill the gap between them with dots. Like this
Hamburger ............................................ $ 4.00
XXL Hamburger .................................... $ 4.00
Milkshake .............................................. $ 4.00
I found a couple of solutions, which only work if you have a background with one color and no texture. The idea was to fill the whole line with dots and set the name/price background span with the same color as the site background, so the dots wouldn't show. But I have a picture for the background.
I'm not going to post my code here, because it wouldn't really matter or help.
Is it even possible? Doesn't have to be css only, might as well be done with JavaScript.

I am kinda late, but you can quite easily do it with a radial-gradient:
.col {
display: inline-block;
vertical-align: top;
}
.names span {
width: 200px;
display: flex;
}
.prices span {
display: block;
text-align:right;
}
.names span:after {
content: "";
display: inline-block;
height: 1em;
flex-grow: 1;
background: radial-gradient(black 25%, transparent 25%) scroll repeat-x bottom left/5px 5px;
}
<div class='names col'>
<span>Hamburger</span>
<span>Hot Dogs</span>
<span>Superman Hamburger</span>
</div>
<div class='prices col'>
<span>$1.00</span>
<span>$0.50</span>
<span>$400.00</span>
</div>
JSFiddle Demo

It's easy to do with some simple javascript and css, here's a fiddle: jsfiddle
The key is to set the width of the div that holds the dots to the width of the column minus the width of the food name minus the width of the price, and to make sure there are more than enough dots to cover the distance, and to set overflow: hidden for the dot div.
$(".menu-row").each(function(index, element) {
var menuRowWidth = $(element).width();
var foodItemWidth = $(element).children('.food-item').width();
var priceWidth = $(element).children('.price').width();
var $dotFiller = $(element).children('.dot-filler');
var dotFillerWidth = menuRowWidth - foodItemWidth - priceWidth;
$dotFiller.width(dotFillerWidth + "px");
});
Then float the item and dot div left, the price right, all within a set width column. It's also important that overflow: hidden is set for the dots, because when we set the width of that div in javascript we want all extra dots to just be cut off. The CSS:
.food-item {
float: left
}
.dot-filler {
overflow: hidden;
width: 0;
float: left;
}
.price {
float: right;
}
.menu-row {
width: 400px;
}
Then structure your html as follows:
<div class="menu-row">
<div class="food-item">Steak</div>
<div class="dot-filler">............................................................................................</div>
<div class="price">$18.00</div>
</div>
<div class="menu-row">
<div class="food-item">Hamburger</div>
<div class="dot-filler">............................................................................................</div>
<div class="price">$8.00</div>
</div>

You can use a wrapper to set a fix width of your Name + Dots.
The css will look like this:
.wrapper {
width: 300px;
overflow: hidden;
display: inline-block;;
white-space: nowrap;
}
The HTML like this:
<div>
<ul class="noDisc">
<li>
<div class="wrapper">
<span>HAMBURGER </span>
<span>...............................................................</span>
</div>
<span>$ 40.00</span>
</li>
<li>
<div class="wrapper">
<span>FRIED CHIKEN </span>
<span>...............................................................</span>
</div>
<span>$ 13.00</span>
</li>
<li>
<div class="wrapper">
<span>STEAK ON A STICK </span>
<span>...............................................................</span>
</div>
<span>$ 99.00</span>
</li>
</ul>
</div>
Live sample:
fiddle

Use display:table; and display: table-cell; for the divs inside the list-elements and border-bottom: Xpx dotted black; for the dots.
ul{
margin: 0;
padding: 0;
}
ul li{
display: table;
width: 100%;
}
ul li div {
display: table-cell;
}
ul li div.food {
padding-right: 5px;
}
ul li div.dots {
border-bottom: 1px dotted #000;
width: 100%;
position: relative;
top: -4px;
}
ul li div.price {
padding-left: 5px;
}
<ul>
<li>
<div class="food">Spaghetti</div>
<div class="dots"> </div>
<div class="price">10.00$</div>
</li>
<li>
<div class="food">Spaghetti</div>
<div class="dots"></div>
<div class="price">10.00$</div>
</li>
<li>
<div class="food">Spaghetti</div>
<div class="dots"></div>
<div class="price">10.00$</div>
</li>
</ul>

Thanks. I used what you had here and improved on it. This code is meant for woocommerce product items, but can be edited for whatever you need. $containerElement is the element you are measuring the width of.
/**
* dotFiller
* adds dynamic dot leaders between product title and count element (<mark>)
* #return void
*/
var dotFiller = function(){
var $containerElement = $('ul.products li.product.has-children h2'),
df = '<div class="df">.....................................................................</div>';
$containerElement.each(function(i,el){
var $el = $(el),
w = $el.width(),
mw = $el.find('mark').width(),
tw = $el.find('span').width(),
dfw = (w - mw - tw) - 24;
// if its not there, lets add it
if (!$(el).has('.df').length){
$el.find('span').after(df);
}
$el.find('.df').css('width',dfw + "px");
});
};
dotFiller();
With this code, you can update/ recalculate on resize like so :
$('window').on('resize',function(){ dotFiller(); });
And here is my css for the internal elements:
mark {
background-color: transparent;
color: $secondary;
display: inline-block; float: right;
font-weight: normal;
}
div.df {
overflow: hidden;
display: inline-block;
margin-left: 10px;
position: relative;
top: 2px;
font-weight: normal;
opacity: 0.8;
}
I hope this helps someone!

Use a div that has a flex spacer with a border-bottom to achieve easy leader dots... The flex layout seems to be the most elegant solution. No pseudo-elements, or left and right block display, etc... Very simple...
HTML
<div class="list-item">
<div class="header-row">
<h4>Menu</h4>
</div>
<br>
<div class="list-item-row">
<div class="left">Hamburger</div>
<div class="dots"></div>
<div class="right">$5.00</div>
</div>
<div class="list-item-row">
<div class="left">Hamburger (XXL)</div>
<div class="dots"></div>
<div class="right">$7.50</div>
</div>
<div class="list-item-row">
<div class="left">Milkshake</div>
<div class="dots"></div>
<div class="right">$3.50</div>
</div>
<div class="list-item-row">
<div class="left">Pickle</div>
<div class="dots"></div>
<div class="right">Free</div>
</div>
</div>
CSS
#import url("https://fonts.googleapis.com/css?family=Lato|Montserrat:400,700|Roboto:400,700");
* {
margin: 0;
padding: 0;
}
button {
font-family: "Roboto";
font-size: 16px;
padding: 5px;
border-radius: 3px;
border: solid #424242 1px;
}
.list-item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: 20px;
font-family: "Lato";
background: #f0f0f0;
padding: 10px;
border: solid #e0e0e0 1px;
}
.list-item-row,
.header-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.left,
.right {
font-family: "Roboto";
}
.right {
color: blue;
}
}
.dots {
flex: 1 0 0;
border-bottom: dotted 2px #b0b0b0;
margin-left: 1em;
margin-right: 1em;
}
See Codepen here => https://codepen.io/anon/pen/vVZmxB

Type text next to an image html

I would like to type text in a contenteditable div that is placed right to an image.
HTML
<div class="container">
<div class="image">
<img src="/path/*.jpg" alt="" />
</div>
<div class="text" contenteditable>
<p></p>
</div>
<div class="clear"></div>
CSS
.container {
width: 1000px;
border: 1px solid #000;
}
.image, .text {
position: relative;
}
.image {
width: 500px;
height: 500px;
overflow: hidden;
float: left;
}
.text {
min-height: 30px;
border: 1px solid #000;
}
.clear{
clear: both;
}
My goal is to have the caret positioned to the right of the image when I focus into the contenteditable and not to the beginning of the p tag as you can see in this Fiddle.
One solution was to insert a in the <p>, as showed in this other Fiddle, but this is not a very clean solution: it pollutes the text that is written inside.
I can take advantage of JavaScript and jQuery, but a pure HTML and CSS solution is preferred
Any thought?
UPDATE
I forgot to say that the text should go also under the image so it cannot be floated or hidden

Simply try margin-left:500px;
.text {
min-height: 30px;
border: 1px solid #000;
margin-left:500px;
}

You have to remove div's and apply to image these css-styles:
display: -moz-inline-stack;
display: inline-block;
_overflow: hidden;
*zoom: 1;
*display: inline;
with
vertical-align: bottom;

Add overflow:hidden into an element that should not overlay a floating element:
http://jsfiddle.net/nothrem/0mdcLzqs/3/
<div class="container">
<div class="image">
<img src="https://ununsplash.imgix.net/photo-1417021423914-070979c8eb34?fit=crop&fm=jpg&q=75&w=1050" alt="" />
</div>
<div class="text" contenteditable style="overflow:hidden">
<p></p>
</div>
<div class="clear"></div>
</div>
UPDATE: you can use Javascript to change the overflow based on element's content
document.getElementsByClassName('text')[0].onblur = function() {
if (this.innerHTML.replace(/<[^>]+>/, '')) { //remove HTML tags
this.style.overflow = 'visible';
} else {
this.style.overflow = 'hidden';
}
}
Blur fires after you finish editing, you may want to add another events, e.g. onkeyup, onmouseclick, etc.

I am not a big fan of floats unless necessary, I'd remove the float: left from the image CSS and add to the .image, .text one these two lines:
display: inline-block;
vertical-align: top;

To get text under your image
Set the container width to the width of your image, and set the position of your text with float left or right like this:
.container {
width: 500px; // width of image
border: 1px solid #000;
}
.image, .text {
position: relative;
}
.image {
width: 500px;
height: 500px;
overflow: hidden;
float: left;
}
.text {
min-height: 30px;
width:100%;
border-top: 1px solid #000;
float:left;
text-align:center;
}
.clear{
clear: both;
}
Here is a demo

Why doesn't my sticky footer stick?

I've browsed to all question related to "sticky footer" and nothing helped me because my #content div does not always have sufficient content to push the footer to the bottom. Here is the code I've used to achieve this, but apparently I did something wrong:
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
margin-top: -45px;
padding-top:15px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
}
<div id="container">
<div id="index_body">
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
Some of my attempts work when index body has loads of text images only then the footer goes to the end but when it doesn't have much content let say 2 paragraph tags and an image the footer doesn't stick. Maybe this is not possible with just CSS, because the index_footer height is not fixed? Is there a way to do this with JavaScript? Or what is the right way to do this?
My screen resolution is really big maybe that is the problem its 1680 x 1050

Try moving your footer div outside of the container div. Your technique should then work. The way you have it set at the moment the footer is within the containing div, but positioned relatively. So even though the containing div may have 100% height, the footer div within it is still only to go just below the content in the container.
A quick example of what I mean, (note that an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>
If you can't move the footer outside of the container (for whatever reason), then you could also try positioning the footer absolutely within the containing div to be at the bottom. position: absolute; bottom: 0px; etc
For example, (again, an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test 2</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
position: relative;
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</div>
</body>
</html>

I know this doesn't answer your exact question, but the work done by Ryan Fait has worked very well for me across multiple browsers. You might want to give this a try (or take a look at what he did compared to what you are doing and see if you can determine a fix).

I believe the root of the problem is that the footer element in the HTML needs to be outside of the #container div. Also, I noticed after I removed that, issues with margin and padding on the body tag. Finally, the border-top on the .footer makes the height of the footer 46px, not 45px...
The corrected CSS:
/* FOOTER FIX */
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
body{margin:0;padding:0;}
#container{ margin-bottom: -46px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
padding-top:15px;
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
The corrected HTML:
<html>
<body>
<div id="container">
<div id="index_body">
</div><!--end index_body -->
</div><!--end container -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</body>
</html>

It's actually easy, here's the minimum required template:
<!doctype html>
<html lang="en">
<head>
<title>SO question 1980857</title>
<style>
html, body {
margin: 0;
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%; /* This is min-height for IE6. */
}
#footer {
position: absolute;
bottom: 0;
}
#footer, #pushfooter {
height: 50px; /* Both must have the same height. */
}
</style>
</head>
<body>
<div id="container">
<div id="content">Content</div>
<div id="pushfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Making the container relative and giving it a min-height will actually stick the footer to its bottom all the time regardless of the content's actual height, which was your major concern as understood from comments.

Going off Harmen, i have tested this and it works, with the footer in the container. altho it is a little hackish
CSS
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body {
min-height: 100%;
margin-bottom: -46px;
}
.footer, .push {
height: 30px;
}
.footer {
clear: both;
position: relative;
z-index: 10;
margin: 0px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
html
<body>
<div id="container">
<div id="index_body">
<div class="push"></div><!--Used to force the footer down to avoid overlap of footer and text -->
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
</body>

In order to realize a sticky footer, that is a footer placed in a fixed position at the bottom of the webpage that doesn't move when your scroll the page you can use this css code:
#footer{
position:fixed;
clear:both;
}
position:fixed makes the footer sticky anyway there could be floating problems if you used float:left or float:right in your code before, so using also clear:both it clears the floating and ensures that the footer is at the bottom under other divs and not on the left or right of the precedent div.

This will work, no matter what the height of the #container is:
CSS:
html, body {
height: 100%;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -50px;
position: relative;
}
#index_footer {
height: 50px;
line-height: 50px;
position: relative;
background: #CCC;
}
#push {
height: 50px;
}
HTML:
<div id="container">
<div id="index_body">
test
</div>
<div id="push"> </div>
</div>
<div id="index_footer" class="footer">
test
</div>