html combine multiple images to one image

Question

I would like to use an image as a background image on a page of my website. I have this image again in sections where individual areas of the image have a glow effect. These parts I would like to put on the background picture, so that with hover Effeklt the partial picture is shown. It must sit however at the exactly correct place. The whole thing should also work on tablet and smartphones. I do not know whether I can implement this as a table or in divs. Do you have any ideas?

Answer 1

To achieve the desired effect of displaying partial images with a glow effect on top of a background image, you can use HTML and CSS. Here's an example of how you can implement it using <div> elements:

<div class="container">
  <div class="background-image"></div>
  <div class="image-overlay"></div>
</div>

.container {
  position: relative;
}

.background-image {
  background-image: url('path/to/background-image.jpg');
  background-size: cover;
  width: 100%;
  height: 100vh; /* Adjust height as needed */
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Example partial image with glow effect */
.image-overlay:hover {
  background-image: url('path/to/partial-image-with-glow.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8; /* Adjust opacity as desired */
}