Jump to content

yuinia

Member
  • Posts

    9
  • Joined

  • Last visited

Posts posted by yuinia

  1. Hi guys,

    With all your guys help, I have established a website that is fully functionable and it is my first one!

    Now I want to polish a bit and have better QoL for the visitors.

    Under my work show case page, I have a text block on top of my image block which i set up a url for each showcase. Currently I can only click the url when my cursor is on the text itself. How I can make the whole text block clickable?

    Page I mention :https://www.thehongkongfixer.com/work

    Best,

    Alex

  2. Hi @tuanphan,  I am using the code you provide. it work well however the code compress my text line into single line. How can i fix it ?

    Here is the code.

    /* Make text box clickable */
    .fe-65275e92573640628018fb6d .html-block {
      position: relative;
    }
    
    .fe-65275e92573640628018fb6d .html-block a {
     position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
       justify-content: center;
    }

     

    Screenshot 2023-11-07 at 10.54.20 AM.png

  3. Hi Guys, 

    I have the code that make the logo change to white on hover. 

    However, when move the cursor away, the logo will fade out like 0.3 seconds then the original logo back in.

    How can i make the white logo fade back to the oringial logo?

    The current code is 
     

    /* Apply a fading effect to the original logo on hover */
    .header-title-logo img {
      transition: opacity 0.3s;
    }
    
    /* Reduce the opacity of the original logo when hovering */
    .header-title-logo:hover img {
      opacity: 0;
    }
    
    /* On hover, change the background image of the anchor (logo) and keep the hover logo visible */
    .header-title-logo:hover a {
      background-image: url('https://static1.squarespace.com/static/652614420877815fd80f9b4d/t/6530e213146e4f13196c0109/1697702419568/Logo+fixer+Fulll+White_400Kb.png'); /* Replace with the URL of your hover logo */
      background-size: contain;
      z-index: 1; /* Place the hover logo on top */
    }
    
    /* Apply a fading effect to the hover logo on hover */
    .header-title-logo:hover .logo-hover img {
      opacity: 1;
    }
    
    /* Reduce the opacity of the hover logo when not hovering */
    .header-title-logo img:not(:hover) + a {
      background-image: none; /* Remove the background image */
      opacity: 0;
    }

    Website : https://dinosaur-gopher-x6fh.squarespace.com/
    pw: makingmovies

  4. Thank for the solution, it works.

    May i wonder what your code means? just for learning

    Also i have the same structure in another page, how should i change the code you provide to make it work on another page? 

  5. Hi guys,

    I am new to create website and i have issues with the css. 

    In my "work" page, I create 16 images blocks for my showcases and I add titles on each blocks.

    I want the title gone when hover so I follow some youtubers code. The code works when i am in editing mode. However, It not working on preview so I wonder what happen or is there anyway i can improve it.

    the code i am using for each block

    @media only screen and (min-width: 640px){
    #block-yui_3_17_2_1_1697078785160_29302 {
    opacity: 0;
     transition: opacity 0.5s
    }
    
    #block-yui_3_17_2_1_1697078785160_29302:hover {
    opacity: 1;
    transition: opacity 0.5s
      }}

    It is my website :  dinosaur-gopher-x6fh.squarespace.com

    password:makingmovies

    Thanks for the help.

×
×
  • 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.