Implement Hawley Template Header

Site URL: https://nicholasasmita.com

Hello Im new in squarespace. And as I read, you cannot change template in squarespace 7.1. And I already pick a wrong design template.

I'm curious how can I put the hover effect (the image is changing follow the text hovering) in my site I want to make it as portfolio thumbnail in the homepage.

I already search the section in edit theme, but can't find it.

Thank you.

https://hawley-demo.squarespace.com/

Do you still need help on this?

You mean this effect? Pass: abc

On 9/12/2020 at 5:08 AM, tuanphan said:

Do you still need help on this?

You mean this effect? Pass: abc

I actually have been looking for a way to do this effect. I believe I want the same effect as the OP is writing about. The one that is native to the HAWLEY template. However over one word and a different background appears. Similar to the example you gave, but I want my images to stretch the background. Would you be able to help guide me in the right direction?

Thank you!

On 9/15/2022 at 7:54 AM, Birdmusic said:

I actually have been looking for a way to do this effect. I believe I want the same effect as the OP is writing about. The one that is native to the HAWLEY template. However over one word and a different background appears. Similar to the example you gave, but I want my images to stretch the background. Would you be able to help guide me in the right direction?

 

Thank you!

Yes, You can add a Code Block > add this code > Then we can make image stretch easier

<div class="image">
            <img id="image">
        </div>
        <div class="bg-text">
            <div class="text">
                <div id="1" img-src="https://cdn.pixabay.com/photo/2020/02/28/21/15/space-4888643__340.jpg" class="image-name">
                    <h2>Aaron Tilley</h2>
                    <p class="sqsrte-small">Photography - United Kingdom</p>
                </div>
                <div id="2" img-src="https://cdn.pixabay.com/photo/2020/05/19/20/01/integration-5192458__340.jpg" class="image-name">
                    <h2>Adam Goldberg</h2>
                    <p class="sqsrte-small">Film - United States</p>
                </div>
                <div id="3" img-src="https://cdn.pixabay.com/photo/2020/04/24/18/28/blue-bell-5088073__340.jpg" class="image-name">
                    <h2>Frank Gehry</h2>
                    <p class="sqsrte-small">Architecture - Canada</p>
                </div>
                <div id="4" img-src="https://cdn.pixabay.com/photo/2020/08/11/21/39/clouds-5481190__340.jpg" class="image-name">
                    <h2>Name 4</h2>
                    <p class="sqsrte-small">Architecture - Canada</p>
                </div>
                <div id="5" img-src="https://cdn.pixabay.com/photo/2020/04/25/23/47/father-5093047__340.jpg" class="image-name">
                    <h2>Name 5</h2>
                    <p class="sqsrte-small">Architecture - Canada</p>
                </div>
                <div id="6" img-src="https://cdn.pixabay.com/photo/2020/04/25/18/45/robinia-5092118__340.jpg" class="image-name">
                    <h2>Name 6</h2>
                    <p class="sqsrte-small">Architecture - Canada</p>
                </div>
                <div id="7" img-src="https://cdn.pixabay.com/photo/2020/04/02/23/01/rain-4996916__340.jpg" class="image-name">
                    <h2>Name 7</h2>
                    <p class="sqsrte-small">Architecture - Canada</p>
                </div>
                <div id="8" img-src="https://cdn.pixabay.com/photo/2020/03/09/14/54/seychelles-4916045__340.jpg" class="image-name">
                    <h2>Name 8</h2>
                    <p class="sqsrte-small">Architecture - Canada</p>
                </div>
            </div>
        </div>
<style>
.image {
    position: fixed;
    top: 50%;
    width: 70%;
    height: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
}
            #image {
                width: 100%;
                height: 100%;
                visibility: hidden;
                opacity: 0.5;
            }
            .bg-text {
                opacity: 0.9;
                top: 0;
                z-index: 2;
                position: absolute;
                width: 100%;
                height: 100%;
            }
            .text {
                text-align: center;
                color: white;
                top: 0;
                left: 25%;
                position: absolute;
                width: 50%;
                height: 100%;
                
            }
            .image-name {
                cursor: pointer;
            }
            .image-name:hover {
                color: yellow;
            }
  /* space between headings */
  .image-name * {
    margin: 0;
}
  .header-announcement-bar-wrapper {
    background: transparent !important;
}
  footer.sections {display:none;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.image-name').mouseenter(function() {
    var imgSrc = $(this).attr('img-src')
    var id = $(this).attr('id')

    $('#image').attr('src', imgSrc)
    $('#image').attr('index', id)
    // $('#image').css('display', 'block')
    $('#image').css('visibility', 'visible')
  })
  $('.image-name').mouseleave(function() {
    $('#image').css('visibility', 'hidden')
  })
})
</script>