YumoBennyYang

yumobennyyang.com Thanks!

The home page of my website currently has a video as background. What I did was uploading a video asa a block then applying the following css: #block-yui_3_17_2_1_1689789220776_5025{ position: fixed; width: 100vw; height: 100vh; top:50%; left:50%; transform: translate(-50%,-50%); z-index:0; } I want to change the object-fit from "contain" to "cover" so that the video always fills the whole screen, but adding the object-fit line into the chunk above did not solve the problem. Is there another class I need to target? Thank you!

This solves the problem. Thank you! What should I do to have logos on all pages bring me to that section? Right now it only works on the home page.

I would like the site logo to bring me to section[data-section-id="64b824b099645b68f03b937a"] on the homepage, instead of the top. Is that possible to do with code injection? Thanks!

That seems to be the best solution. Thanks again!

business

I just disabled the cursor animation. The thing is if the header doesnt stick to the top it will remain in the middle and make my content in the middle of my page unclickable right? Thanks for looking at my code!

This is a new home page i am working on: yumobennyyang.com/new-home. The cv link on the top right corner is clickable in the beginning, but as soon as the header (logo) sticks to the top, it becomes unclickable, i'm guessing because now it is covered by the transparent header. But i've tried playing with the z index of .header, .section, etc. Nothing fixed it. The link is also completely unclickable on mobile. Would be great if I could get some advice. Thanks!

I'm trying to create an interaction with block IDs where a base image is split into 4 sections, and depending on which section you hover over, four different images replace the base image. So I have 9 blocks in total. 1 base image block, 4 alt image blocks all overlapped together with the base image block, and 4 small transparent image blocks placed on top of other images for hovering. I have right now this code: #block-base{ opacity: 1 } #block-image1, #block-image2, #block-image3, #block-image4{ opacity: 0 } #block-section1:hover + #block-image1{ opacity: 1 } #block-section2:hover + #block-image2{ opacity: 1 } #block-section3:hover + #block-image3{ opacity: 1 } #block-section4:hover + #block-image4{ opacity: 1 } The blocks are all opacity 0 but none show up when I hover over the four sections. I also tried "~", " ", and ">" instead of "+", but none work. Can someone help me with this please? Thank you so much.