Canvas Support

video-wrap overlay on hover

3 replies·opened Jul 2, 2021
S
silkysackJul 2, 2021

Hello, i am using the following code for a column with a video, but I cant figure out how to get a color overlay on mouse hover. Can you please help?

<div class="col-md-7 px-0 mx-0" style="min-height: 70%">
								<a href="#" class="d-block position-relative h-100">
									<div class="vertical-middle dark">
										<div class="container text-center">
											<i class="i-plain i-large icon-line-video mx-auto mt-2" data-animate="fadeInDown"></i>
											<div class="emphasis-title m-0" data-animate="fadeInUp">
												<h1 class="font-secondary text-capitalize ls0" style="font-size: 74px; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">Rainbow Cake</h1>
												<h2>__</h2>
											</div>
										</div>
									</div>
								<div class="video-wrap">
									<div class="yt-bg-player" data-quality="hd1080" data-start="14" data-stop="25" data-video="https://youtu.be/"></div>
								</div>
								</a>
							</div>
S
SemiColonWebSTAFFJul 3, 2021

Hello,

This is not provided out of the box but absolutely possible with minor customization. Simply use the following CSS Codes:

.video-overlay-onhover .video-overlay {
	opacity: 0;
	transition: all .3s ease;
}

.video-overlay-onhover:hover .video-overlay {
	opacity: 1;
}

Now, simply use the following code for .video-wrap:

<div class="video-wrap">
	<div class="yt-bg-player" data-quality="hd1080" data-start="20" data-stop="40" data-video="https://youtu.be/A3PDXmYoF5U"></div>
	<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
</div>

Finally, add the .video-overlay-onhover Class to the <a> Tag.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

S
silkysackJul 3, 2021

Top Notch Support!

Thank You!!!

S
SemiColonWebSTAFFJul 3, 2021

Very Happy to Help! :)

Please do let us know if we can help you with anything else.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard