Jump to content

How to create same concept of squarespace text hover showing image.

Recommended Posts

  • Replies 3
  • Views 812
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

               <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(&quot;https://media-www.sqspcdn.com/images/components/templates/desktop/suhama-2-2500w.jpg&quot;);">
                  <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>


   

   
 

Screenshot 2022-02-10 164951.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.