Making Image hover over another Image

Question

I am quite new to this game and seing as I am the creative director and designer of my new start up, it is on me to build our homepage. I use Cargo Collective as a host, and I have managed to figure it all out until now. I am looking at a problem that I can't seem to find a working solution for - really hoping someone here can help me.

I have a banner on one of the pages, consisting of 3 individual images that all works as links to different internal pages. I want to add images on top for hover (they still need to work as links) - but the code Cargo provided me only allows me to link one image on hover over a background. I want to make image 1.2 hover over image 1.1, image 2.2 hover over image 2.1 and image 3.2 hover over image 3.1. If this is something that can be done easily with CSS and or HTML?

Adding the code i received from cargo here:

.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
    visibility: hidden;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
}

.hover-image {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: 90vw;
    height: 90vh;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}

Many thanks in advance from a desperate non-coding pro trying to build her company

Answer 1

I want to make image 1.2 hover over image 1.1, image 2.2 hover over image 2.1 and image 3.2 hover over image 3.1. If this is something that can be done easily with CSS and or HTML?

I provide you a part of html & css code that solve your problem, as I understand it.

Do you mean smth like this?

*{
  margin: 0;
  padding: 0;
}

body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: orange;
}

.parentBlock{
  display: flex;
  gap: 30px;
}

.block{
  background: purple;
  position: relative;
}

.block img{
  width: 100px;
  height: 100px;
  vertical-align: middle;
}

.block img:nth-of-type(2){
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity .2s linear;
}

.block img:nth-of-type(2):hover{
  opacity: 1;
}

<div class="parentBlock">
    <div class="block">
        <a href="/">
            <img
                src="https://st2.depositphotos.com/1011969/6070/i/950/depositphotos_60704945-stock-photo-number-1.jpg"
                alt="image1"
            />
            <img
                src="https://static8.depositphotos.com/1338574/829/i/450/depositphotos_8292993-stock-photo-the-number-2-in-gold.jpg?forcejpeg=true"
                alt="image2"
            />
        </a>
    </div>
    <div class="block">
        <a href="/">
            <img
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/NYCS-bull-trans-3.svg/1200px-NYCS-bull-trans-3.svg.png"
                alt="image3"
            />
            <img
                src="https://static8.depositphotos.com/1338574/829/i/600/depositphotos_8293024-stock-photo-the-number-4-in-gold.jpg"
                alt="image4"
            />
        </a>
    </div>
    <div class="block">
        <a href="/">
            <img
                src="https://static8.depositphotos.com/1338574/829/i/600/depositphotos_8292996-stock-photo-the-number-5-in-gold.jpg"
                alt="image5"
            />
            <img
                src="https://st.depositphotos.com/1001311/3411/i/600/depositphotos_34119663-stock-photo-3d-golden-number-collection-6.jpg"
                alt="image6"
            />
        </a>
    </div>
</div>