-
Posts
6 -
Joined
-
Last visited
LucVrhovnik's Achievements
-
tuanphan reacted to a post in a topic: Text over Video on hover, still allowing video to be played
-
Text over Video on hover, still allowing video to be played
LucVrhovnik replied to LucVrhovnik's topic in Customize with code
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); } } -
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/
-
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/
- 1 reply
-
- code
- code-injection
-
(and 3 more)
Tagged with:
-
LucVrhovnik started following Displaying text transition over video
-
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/
-
Ziggy reacted to a post in a topic: Making an object into a clickble object that leads to an url
-
LucVrhovnik changed their profile photo
-
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; }