Tommyhiggs Posted February 10, 2022 Share Posted February 10, 2022 Hi everyone, I trying to do the same concept of the current website of squarespace. There is a left side links that when you hover the text it shows an image in the right side. Source: https://www.squarespace.com/ Thanks, Link to comment
Tommyhiggs Posted February 10, 2022 Author Share Posted February 10, 2022 (edited) I could make it more or less work but I don´t know how to link my images, when I change the url it doesn´t work. Could anyone help me to see what I am doing wrong: Thanks, Edited February 10, 2022 by Tommyhiggs Link to comment
Tommyhiggs Posted February 10, 2022 Author Share Posted February 10, 2022 <main> <script type="text/javascript" id=""> var __dispatched__ = {}, __i__ = self.postMessage && setInterval(function() { if (self.PrivacyManagerAPI && __i__) { var b = { PrivacyManagerAPI: { action: "getConsentDecision", timestamp: (new Date).getTime(), self: self.location.host } }; self.top.postMessage(JSON.stringify(b), "*"); __i__ = clearInterval(__i__) } }, 50); self.addEventListener("message", function(b, a) { try { if (b.data && (a = JSON.parse(b.data)) && (a = a.PrivacyManagerAPI) && a.capabilities && "getConsentDecision" == a.action) { var d = self.PrivacyManagerAPI.callApi("getGDPRConsentDecision", self.location.host).consentDecision; d && d.forEach(function(c) { __dispatched__[c] || (self.dataLayer && self.dataLayer.push({ event: "GDPR Pref Allows " + c }), __dispatched__[c] = 1) }) } } catch (c) {} }); </script> <div class="templates theme-dark-background" data-component-name="templates" data-component-id="7" data-reveal-parent="" data-scrolled-into-view="true" data-scrolled-past-view="false" data-has-intersected="true"> <div class="templates__wrapper"> <div class="templates__templates-container"> <div class="templates__goals-container" data-reveal-self="" data-scrolled-into-view="true" data-scrolled-past-view="false" data-has-intersected="true"> <ol class="templates__goals-list"> <li style="--reveal-delay: calc(2 * 0.05s);"> <a class="templates__goal-link" href="/templates" property="item" typeof="WebPage" data-template-category="local-business" data-identifier="local-business" data-section="templates"> <span property="name">Branding <aside>→</aside> </span> </a> </li> <li style="--reveal-delay: calc(3 * 0.05s);"> <a class="templates__goal-link" href="/templates" property="item" typeof="WebPage" data-template-category="portfolio" data-identifier="portfolio" data-section="templates"> <span property="name">3D Visuals<aside>→</aside> </span> </a> </li> <li style="--reveal-delay: calc(4 * 0.05s);"> <a class="templates__goal-link" href="/templates" property="item" typeof="WebPage" data-template-category="blog" data-identifier="blog" data-section="templates"> <span property="name">Typographic <aside>→</aside> </span> </a> </li> <li style="--reveal-delay: calc(5 * 0.05s);"> <a class="templates__goal-link" href="/templates" property="item" typeof="WebPage" data-template-category="restaurant" data-identifier="restaurant" data-section="templates"> <span property="name">Publication <aside>→</aside> </span> </a> </li> <li style="--reveal-delay: calc(6 * 0.05s);"> <a class="templates__goal-link" href="/templates" property="item" typeof="WebPage" data-template-category="services" data-identifier="services" data-section="templates"> <span property="name">Digital <aside>→</aside> </span> </a> </li> <li style="--reveal-delay: calc(7 * 0.05s);"> <a class="templates__goal-link is-active" href="/templates" property="item" typeof="WebPage" data-template-category="personal-cv" data-identifier="personal-cv" data-section="templates"> <span property="name">Lab <aside>→</aside> </span> </a> </li> </ol> </div> <div class="templates__images"> <div class="templates__image is-loaded is-active" role="img" aria-label="Desktop version of the Suhama template." tabindex="0" data-template-category="personal-cv" style="background-image: url("https://media-www.sqspcdn.com/images/components/templates/desktop/suhama-2-2500w.jpg");"> <img data-load="false" data-use-bg-image="true" data-size-format="filename" data-image-dimensions="2331x1458" data-src="https://media-www.sqspcdn.com/images/components/templates/desktop/suhama-2.jpg" style="display: none;" class="" data-image-resolution="2500w" alt="Desktop version of the Suhama template."> </div> </div> </div> </div> </div> <style> </main> <style> *, :before, :after { -webkit-box-sizing: inherit; box-sizing: inherit; } templates__image is-loaded .element.style { background-image: url(https://media-www.sqspcdn.com/images/components/templates/desktop/altaloma-2500w.jpg); } .te } @media (min-width: 768px) .templates__images { width: calc((((100% - 200px)/6)*3) + 80px + 0px); margin-bottom: 0; } .templates__images { position: relative; display: block; margin-bottom: 32px; width: 100%; -ms-flex-item-align: start; align-self: flex-start; } html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button { vertical-align: baseline; border: 0; outline: 0; padding: 0; margin: 0; } .theme-dark-background a { color: #fff; } .templates { background-color: #0a0a0a; } @media all and (min-width: 1440px) { .templates__wrapper { padding-left: 40px; padding-right: 40px; } } @media all and (min-width: 1440px) { .templates__wrapper { padding-top: 80px; padding-bottom: 80px; } } @media all and (min-width: 1280px) { .templates__heading h3 { font-size: 50px; } } @media all and (min-width: 1440px) { .templates__heading h3 { font-size: 56px; } } .templates__heading h3 .is-visible { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } body.has-reduced-motion .templates__heading h3 { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } @media all and (prefers-reduced-motion: reduce) { .templates__heading h3 { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } } @media all and (min-width: 768px) { .templates__heading h3 { margin-bottom: 16px; } } @media all and (min-width: 1280px) { .templates__heading h3 { margin-bottom: 20px; } } .templates__heading h3[data-has-intersected="true"] { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .templates__heading p { opacity: 0; -webkit-transform: translateX(15px); transform: translateX(15px); -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; --reveal-delay: 0.1s; max-width: 14em; } .templates__heading p .is-visible { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } body.has-reduced-motion .templates__heading p { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } @media all and (prefers-reduced-motion: reduce) { .templates__heading p { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } } @media all and (min-width: 375px) { .templates__heading p { max-width: 18em; } } @media all and (min-width: 768px) { .templates__heading p { max-width: 25em; } } .templates__heading p[data-has-intersected="true"] { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .templates__heading-wrapper { position: relative; } .templates__templates-container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } @media all and (min-width: 768px) { .templates__templates-container { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media all and (min-width: 1280px) { .templates__goals-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .templates__goals-container[data-has-intersected="true"] ol li, .templates__goals-container[data-has-intersected="true"] .templates__all-templates-link { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .templates__goals-container li { opacity: 0; -webkit-transform: translateX(15px); transform: translateX(15px); -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition-delay: var(--reveal-delay); -o-transition-delay: var(--reveal-delay); transition-delay: var(--reveal-delay); margin-bottom: 12px; } .templates__goals-container li .is-visible { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } body.has-reduced-motion .templates__goals-container li { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } @media all and (prefers-reduced-motion: reduce) { .templates__goals-container li { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } } @media all and (min-width: 1024px) { .templates__goals-container li { margin-bottom: 16px; } } .templates__goals-container li:last-child { margin-bottom: 30px; } @media all and (min-width: 1280px) { .templates__goals-container li:last-child { margin-bottom: 0; } } .templates__goal-link { position: relative; text-transform: initial; opacity: 0.3; -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); font-size: 24px; line-height: 1.2em; } @media all and (min-width: 768px) { .templates__goal-link { font-size: 32px; line-height: 1em; } } @media all and (min-width: 1024px) { .templates__goal-link { font-size: 40px; } } @media all and (min-width: 1440px) { .templates__goal-link { font-size: 48px; } } @media all and (min-width: 1920px) { .templates__goal-link { font-size: 64px; } } .templates__goal-link::after { content: ""; position: absolute; width: 100%; height: 2px; left: 0; bottom: 1px; background-color: currentColor; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); } @media all and (min-width: 1024px) { .templates__goal-link::after { height: 3px; } } .templates__goal-link aside { display: inline-block; top: 6px; opacity: 0; -webkit-transform: translateX(-5px); transform: translateX(-5px); -webkit-transition: opacity 0.4s cubic-bezier(0.694, 0, 0.335, 1), -webkit-transform 0.4s cubic-bezier(0.694, 0, 0.335, 1); transition: opacity 0.4s cubic-bezier(0.694, 0, 0.335, 1), -webkit-transform 0.4s cubic-bezier(0.694, 0, 0.335, 1); -o-transition: transform 0.4s cubic-bezier(0.694, 0, 0.335, 1), opacity 0.4s cubic-bezier(0.694, 0, 0.335, 1); transition: transform 0.4s cubic-bezier(0.694, 0, 0.335, 1), opacity 0.4s cubic-bezier(0.694, 0, 0.335, 1); transition: transform 0.4s cubic-bezier(0.694, 0, 0.335, 1), opacity 0.4s cubic-bezier(0.694, 0, 0.335, 1), -webkit-transform 0.4s cubic-bezier(0.694, 0, 0.335, 1); } .templates__goal-link:hover, .templates__goal-link.is-active { opacity: 1; } .templates__goal-link:hover::after, .templates__goal-link.is-active::after { -webkit-transform: scaleX(1); transform: scaleX(1); } .templates__goal-link:hover aside, .templates__goal-link.is-active aside { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .templates__images { position: relative; display: block; margin-bottom: 32px; width: 100%; -ms-flex-item-align: start; align-self: flex-start; } .templates__images:before { display: block; content: ""; width: 100%; padding-top: 62.548%; } .templates__images > * { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; } @media all and (min-width: 768px) { .templates__images { width: calc((((100% - 200px) / 6) * 3) + 80px + 0px); margin-bottom: 0; } } @media all and (min-width: 1024px) { .templates__images { width: calc((((100% - 440px) / 12) * 7) + 240px + 0px); } } .templates__image { background-size: cover; background-repeat: no-repeat; background-position: center; opacity: 0; -webkit-transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1); -o-transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1); transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1); position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; -o-transition-property: opacity, transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-duration: 0.3s, 0.8s; -o-transition-duration: 0.3s, 0.8s; transition-duration: 0.3s, 0.8s; -webkit-transition-timing-function: step-end, step-end; -o-transition-timing-function: step-end, step-end; transition-timing-function: step-end, step-end; -webkit-transform: translateX(-10px); transform: translateX(-10px); z-index: 1; } .templates__image.is-loaded { opacity: 1; } .templates__image img { height: 100%; width: 100%; } .templates__image.is-loaded { opacity: 0; } .templates__image.is-active { opacity: 1; z-index: 2; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955), cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955), cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955), cubic-bezier(0.25, 0.46, 0.45, 0.94); } .templates__image img { opacity: 0; } .templates__all-templates-link { opacity: 0; -webkit-transform: translateX(15px); transform: translateX(15px); -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition-delay: var(--reveal-delay); -o-transition-delay: var(--reveal-delay); transition-delay: var(--reveal-delay); } .templates__all-templates-link .is-visible { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } body.has-reduced-motion .templates__all-templates-link { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } @media all and (prefers-reduced-motion: reduce) { .templates__all-templates-link { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: none; -o-transition: none; transition: none; } } </style> Link to comment
tuanphan Posted February 12, 2022 Share Posted February 12, 2022 Can you share link to your site? We can check easierHi, Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment