Hover Text > Show Image

You can check a demo here: https://tuanphan3.squarespace.com/hover-text-show-image-1?noredirect

Pass: abc

You can follow these steps to achieve effect: “hover text > show an image”

For 1 text

#1. Add this code to Code Injection > Footer. Replace Pixabay with your image url.

<img src="https://cdn.pixabay.com/photo/2016/12/03/15/44/fireworks-1880045_1280.jpg" class="hover-txt-img01"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('img.hover-txt-img01').appendTo('[href="#hover-txt-img01"]');
})
</script>

#2. Add this code to Custom CSS

img.hover-txt-img01 {
 display: none;
}
[href="#hover-txt-img01"] {
    color: black !important;
    position: relative;
}
[href="#hover-txt-img01"] img {
    position: absolute;
    width: 150px;
    bottom: 50px;
    right: 0;
    visibility: hidden;
  display: block;
}
[href="#hover-txt-img01"]:hover img {
    visibility: visible;
}
[href="#hover-txt-img01"] {
  text-decoration: none !important;
  background-image:none !important;
}

#3. Edit text > Add a link > Enter this format

#hover-txt-img01

For more text

You will need to enter links to all text, the format will be

#hover-txt-img01

#hover-txt-img02

#hover-txt-img03

with CSS code, use this shorter code for all text

[href*="#hover-txt-img"] {
  text-decoration: none !important;
  background-image:none !important;
}
img[class*="hover-txt-img"] {
 display: none;
}
[href*="#hover-txt-img"] {
    color: black !important;
    position: relative;
}

[href*="#hover-txt-img"] img {
    position: absolute;
    width: 150px;
    bottom: 50px;
    right: 0;
    visibility: hidden;
  display: block;
}

[href*="#hover-txt-img"]:hover img {
    visibility: visible;
}

with Code Injection, use this code

<img src="https://cdn.pixabay.com/photo/2016/12/03/15/44/fireworks-1880045_1280.jpg" class="hover-txt-img01"/>
<img src="https://cdn.pixabay.com/photo/2023/06/02/14/10/woman-8035746_1280.jpg" class="hover-txt-img02"/>
<img src="https://cdn.pixabay.com/photo/2023/12/11/09/36/whisky-8443155_1280.jpg" class="hover-txt-img03"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('img.hover-txt-img01').appendTo('[href="#hover-txt-img01"]');
$('img.hover-txt-img02').appendTo('[href="#hover-txt-img02"]');
$('img.hover-txt-img03').appendTo('[href="#hover-txt-img03"]');
})
</script>

Remember to adjust these