Jump to content

LucVrhovnik

Member
  • Posts

    6
  • Joined

  • Last visited

LucVrhovnik's Achievements

  1. For anyone wondering it is possible to change the CSS code to apply text over video, here is the solution I have found: #block-b23b233133662b40a8d3 { position: relative; cursor: pointer; } #block:hover { cursor: pointer; } #block::after { content: "XX"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: Effra; font-weight: bold; font-size: 30px; color: #FAF9F6; opacity: 0; transition: opacity 1s; } #block:hover::after { opacity: 1; } #block:hover::after:hover { color: #FAF9F6; font-size: 200px; opacity: 1; transform: translate(-50%, -50%) rotate(20deg); } }
  2. Hi there, I am trying to customize my homepage so that text will appear over my Vimeo embedded video that has a custom jpg. thumb page. My issue: As you will see on my site (URL below), the text appears over the video perfectly, however, the block/video behind it is not accessible anymore. Is there a code I can add that could resolve this issue? Thank you Here is my current CODE (is in CSS do I need HTML or JS for this?): #block-yui_3_17_2_1_1670503373785_912328,#block-yui_3_17_2_1_1684500049665_3493:hover { cursor: pointer; } @media only screen and (min-width: 640px){ #block-yui_3_17_2_1_1684920682664_10348 { opacity: 0; transition: opacity 1s } #block-yui_3_17_2_1_1684920682664_10348:hover { opacity: 1; transition: opacity 1s } } My site URL: https://www.lucvrhovnik.com/
  3. Hi there, I am trying to customize my homepage so that text will appear over my Vimeo embedded video that has a custom jpg. thumb page. My issue: As you will see on my site (URL below), the text appears over the video perfectly, however, the block/video behind it is not accessible anymore. Is there a code I can add that could resolve this issue? Thank you Here is my current CODE (is in CSS do I need HTML or JS for this?): #block-yui_3_17_2_1_1670503373785_912328,#block-yui_3_17_2_1_1684500049665_3493:hover { cursor: pointer; } @media only screen and (min-width: 640px){ #block-yui_3_17_2_1_1684920682664_10348 { opacity: 0; transition: opacity 1s } #block-yui_3_17_2_1_1684920682664_10348:hover { opacity: 1; transition: opacity 1s } } My site URL: https://www.lucvrhovnik.com/
  4. Hi there, I am trying to customize my homepage so that text will appear over my Vimeo embedded video that has a custom jpg. thumb page. My issue: As you will see on my site (URL below), the text appears over the video perfectly, however, the block/video behind it is not accessible anymore. Is there a code I can add that could resolve this issue? Thank you Here is my current CODE: #block-yui_3_17_2_1_1670503373785_912328,#block-yui_3_17_2_1_1684500049665_3493:hover { cursor: pointer; } @media only screen and (min-width: 640px){ #block-yui_3_17_2_1_1684920682664_10348 { opacity: 0; transition: opacity 1s } #block-yui_3_17_2_1_1684920682664_10348:hover { opacity: 1; transition: opacity 1s } } My site URL: https://www.lucvrhovnik.com/
  5. Nicee, thank you for the info Ziggy much appricated. Haha sometimes you gotta learn the hard way 🙂
  6. Hello everyone, I hope you are well. I am trying to customize my site with CSS and I am currently at the stage of trying to assign a URL to an object, I am doing this with the help of ChatGPT, ill list bellow my code, the block im trying to change and the url + my sites url. Let me know if im missing anything. PS The code I have works great and it seems to make my object into a button but for some reason it does not lead my to my desired url? SITE: https://www.lucvrhovnik.com/ Desired URL: https://www.lucvrhovnik.com/editing BLOCK: #block-yui_3_17_2_1_1683364613487_1815 CODE: #block-yui_3_17_2_1_1683364613487_1815 { cursor: pointer; position: relative; z-index: 1; } #block-yui_3_17_2_1_1683364613487_1815::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #block-yui_3_17_2_1_1683364613487_1815::after { background-color: transparent; } #block-yui_3_17_2_1_1683364613487_1815::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } #block-yui_3_17_2_1_1683364613487_1815::before { pointer-events: none; } #block-yui_3_17_2_1_1683364613487_1815::after { pointer-events: auto; } #block-yui_3_17_2_1_1683364613487_1815::before, #block-yui_3_17_2_1_1683364613487_1815::after { display: block; } #block-yui_3_17_2_1_1683364613487_1815::after { content: ""; } #block-yui_3_17_2_1_1683364613487_1815::before, #block-yui_3_17_2_1_1683364613487_1815::after { transition: opacity 0.3s ease; } #block-yui_3_17_2_1_1683364613487_1815:hover::before, #block-yui_3_17_2_1_1683364613487_1815:hover::after { opacity: 0; } #block-yui_3_17_2_1_1683364613487_1815:hover { color: inherit; } #block-yui_3_17_2_1_1683364613487_1815::before, #block-yui_3_17_2_1_1683364613487_1815::after { pointer-events: none; } #block-yui_3_17_2_1_1683364613487_1815::after { pointer-events: auto; } /* Change the URL to the desired destination */ #block-yui_3_17_2_1_1683364613487_1815::after { cursor: pointer; pointer-events: auto; } #block-yui_3_17_2_1_1683364613487_1815::after { content: "https://www.lucvrhovnik.com/editing"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; }
×
×
  • 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.