Jprood

On 5/20/2021 at 9:03 AM, Mireyya said:

Site URL: https://www.whatadaycollective.com/artists

Hello!

I'm trying to find a way to display an image over text without success, that's why I'm posting here. The gallery/portfolio features aren't a solution as the text is scattered around the screen for aesthetic purposes.

I'm building an artists page, therefore the goal would be to display a picture when hovering over each artist name. 

This is the page: https://www.whatadaycollective.com/artists

Any help would be much appreciated! 

Thanks :)

obviously it can be done. this is a squarespace site and she did it. trying to figure it out myself  https://www.revampdesignstudio.com/work

8 hours ago, creedon said:

@Jprood

I think I have the answer to your issues.

First remove (make a copy) or comment out any code that you added in previous attempts.

Add the following to Design > Custom CSS.

@media ( hover: none ) {

  .cursor {
  
    display: none !important;
    
    }
  }

* {

  cursor: none;
  
  }

.cursor {

  --size: 10px;
  
  height: var( --size );
  width: var( --size );
  
  border-radius: 50%;
  pointer-events: none;
  position: absolute;
  transform: translate( -50%, -50% );
  z-index: 99999999999;
  
  }

.cursor.cursor-dot {

  background: #ffffff; /* This defines the color of the cursor */
  mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */
  transition: width 0.6s, height 0.6s, background-color 0.6s;
  transition-timing-function: ease-out;
  
  }

.cursor-dot.active {

  --size: 50px;
  
  background-color: #ffffff;
  
  }

Add the following to Settings > Advanced > Code Injection > HEADER. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Settings > Advanced > Code Injection > FOOTER. 
 

<script>

  $( ( ) => {
  
    $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );
  
    $( window ).mousemove ( function ( e ) {
    
      $( '.cursor' ).css ( {
      
        left: e.pageX,
        top: e.pageY
        
        } );
        
      } );
      
    $( window ).mousemove ( function ( e ) {
    
      $( 'a' ).on ( 'mouseenter', function ( ) {
        
        $( '.cursor' ).addClass ( 'active' );
        
        } );
        
      } );
      
    $( window ).mousemove ( function ( e ) {
    
      $( 'a' ).on ( 'mouseleave', function ( ) {
      
        $( '.cursor' ).removeClass ( 'active' );
        
        } );
        
      } );
      
    } );
    
  </script>

You will need to change the colors to match your color scheme.

Let us know how it goes.

perfect!! youre the man! i would have never been able to pick all that out. Thank u!!!!

On 10/26/2020 at 11:02 PM, LukasEriksen said:

@rwpI would like to get the same cursor for my website, but unfortunately the jsfiddle you posted is no longer available. I have found an alternate code on another squarespace website, but I can't seem to integrate into my website https://www.lukaseriksen.com/.

The code I found is as follows:

<style>
  @media (hover: none) {
    .cursor {display:none !important;
    }
  }
  * {
    cursor: none;
  }
  .cursor {
    --size: 10px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .cursor.cursor-dot {
    background: #ffffff;  /* This defines the color of the cursor */
    mix-blend-mode: difference;  /* Delete this line if you dont want the circle to invert */
    transition: width .6s, height .6s,
      background-color .6s;
    transition-timing-function: ease-out;
  }
  .cursor-dot.active {
    --size: 50px;
    background-color: #ffffff;
  }
</style>

<script>
  $(window).mousemove(function(e) {     
    $(".cursor").css({
      left: e.pageX,
      top: e.pageY
    })    
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseenter", function() {   
      $('.cursor').addClass("active")   
    })  
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseleave", function() {    
      $('.cursor').removeClass("active")    
    })
  });
</script>

Would appreciate any help you could provide!

Hi Lukas. You got this to work!! How and where did u put it. Looks so good i wanna do same please 

2 hours ago, inunzi said:

I was asking on where you found the code. Is it the same code above?

Yup it was first thing in this thread and then i saw that the first site took it from minimist.ca and got it to work 🤷🏻‍♂️

1 hour ago, inunzi said:

I tested the code on my site but nothing changed sadly. May I ask on where you found this code?

https://www.lukaseriksen.com And http://www.minimist.ca 

13 hours ago, inunzi said:

Hmm, let me try the code on my site to see if there’s any problem there!

u are amazing. ive even tried changing color to #000 since the example site is black and mine is white.

4 hours ago, inunzi said:

Hmm what issues are you having with the code or inserting it into your site? Like do you not know where to insert the code, or is there another issue? Thanks!

I’ve tried it completely ion code injection in both header and then footer. And I’ve tried it splitting up the style half in css and the script in code injection. Just seems to make my cursor disappear. I thought since my site is white that changing the color of the cursor to black would work but still no dot cursor. That’s kinda where I’m stuck at 

58 minutes ago, inunzi said:

Nevermind the code seemed to work perfectly! I just went on your site, and the cursor was an inverted circle 🙂

My site is www.fitaf.co I’m trying to figure out how to implement that above code also. But i can’t seem to get it

On 10/29/2020 at 3:00 PM, inunzi said:

Also where there more codes to it other than JavaScript? Like HTMlL or Css? Thanks!

thats seems to be the code. ive tried injecting all into my footer and also tried just injecting the script and putting the style into my css custome. but all ive done is make the cursor disapear completely

On 10/26/2020 at 11:02 PM, LukasEriksen said:

@rwpI would like to get the same cursor for my website, but unfortunately the jsfiddle you posted is no longer available. I have found an alternate code on another squarespace website, but I can't seem to integrate into my website https://www.lukaseriksen.com/.

The code I found is as follows:

<style>
  @media (hover: none) {
    .cursor {display:none !important;
    }
  }
  * {
    cursor: none;
  }
  .cursor {
    --size: 10px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .cursor.cursor-dot {
    background: #ffffff;  /* This defines the color of the cursor */
    mix-blend-mode: difference;  /* Delete this line if you dont want the circle to invert */
    transition: width .6s, height .6s,
      background-color .6s;
    transition-timing-function: ease-out;
  }
  .cursor-dot.active {
    --size: 50px;
    background-color: #ffffff;
  }
</style>

<script>
  $(window).mousemove(function(e) {     
    $(".cursor").css({
      left: e.pageX,
      top: e.pageY
    })    
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseenter", function() {   
      $('.cursor').addClass("active")   
    })  
  });
  $(window).mousemove(function(e) {
    $("a")
      .on("mouseleave", function() {    
      $('.cursor').removeClass("active")    
    })
  });
</script>

Would appreciate any help you could provide!

did u figure this out? where did you paste the codes to get it to work