Jump to content

Text over Video on hover, still allowing video to be played

Go to solution Solved by LucVrhovnik,

Recommended Posts

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/

Link to comment
  • Solution

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);
  }
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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