Demo: https://tuanphan-demo01.squarespace.com/hover-text-show-multiple-images-1?noredirect
Password: abc
This code is only used in cases where the Text Section is the First Section. If the Text is in another position, the code will not run. You will need to adjust a bit with JS. You can comment below or email me with the page URL, I will give you a new code.
#1. First, add 4 Text with the URL:
- Dinner – /dinner
- Lunch – /lunch
- Eat – /eat
- Drink – /drink
#2. Add 4 Sections with Images under.
#3. Install Squarespace ID Finder to find the ID of 4 Sections (contains Images)
In my example, we will have:
- section[data-section-id=”665d3909e908ba2a451ea1e2″]
- section[data-section-id=”665d39a73b6ee5509ad4a8d3″]
- section[data-section-id=”665d39d07735314d47858618″]
- section[data-section-id=”665d39dbf11cf44fafce3dd1″]
#3. Use this code to Custom CSS box
section[data-section-id="665d3909e908ba2a451ea1e2"], section[data-section-id="665d39a73b6ee5509ad4a8d3"], section[data-section-id="665d39d07735314d47858618"], section[data-section-id="665d39dbf11cf44fafce3dd1"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: none;
}
body:has(a[href="/dinner"]:hover) section[data-section-id="665d3909e908ba2a451ea1e2"] {
display: block !important;
}
body:has(a[href="/lunch"]:hover) section[data-section-id="665d39a73b6ee5509ad4a8d3"] {
display: block !important;
}
body:has(a[href="/eat"]:hover) section[data-section-id="665d39d07735314d47858618"] {
display: block !important;
}
body:has(a[href="/drink"]:hover) section[data-section-id="665d39dbf11cf44fafce3dd1"] {
display: block !important;
}
#4. Explain code
