HTML & CSS How do I change a hover image position from the center to right above the main image?

[jeyversee]

Hi all, I am using this code from cargo support for my cargo website. I have a button on the upper left of my website and I want it to show a different image that goes right on top of the button.



The code here places the hover image right at the centre. I was wondering if anyone could tell me what to change from the original css?

Here is what it says:

.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;
}

Here is the link for the full code:

https://support.cargo.site/Show-an-Image-on-Hover


Thank you

 

[Tealk]

Hi there, Welcome to Code Forum.

Please make sure to add your code using our Code BBCode feature, you can read more here.

 

[simong1993]

Ill get the beer in as we will need a few at the end of this just kidding as the picture is fixed you can simple change it inside .hover-image

Change this

position: fixed;
top: 50%;
left: 50%;

too

position: fixed;
top: 80%;
left: 50%;

and it should now show further at the bottom.

 

[Malcolm]

Hello @jeyversee, Welcome to Code Forum!

Hi there, Welcome to Code Forum.

Please make sure to add your code using our Code BBCode feature, you can read more here.

@jeyversee I have gone ahead and done this for you. Please make sure from this point on you go by what @Tealk stated.

Hi all, I am using this code from cargo support for my cargo website. I have a button on the upper left of my website and I want it to show a different image that goes right on top of the button.



The code here places the hover image right at the centre. I was wondering if anyone could tell me what to change from the original css?

Here is what it says:

.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;
}

Here is the link for the full code:

https://support.cargo.site/Show-an-Image-on-Hover


Thank you

As to your problem you can change the position of the image that is displayed on hover by editing the top and left values under .hover-image. Let us know if our solutions solved your issue. If not and you have found it elsewhere please feel free to share that solution here and mark it as threads solution.

Cheers!