I am attempting to trigger CSS animations when a pseudo element is hovered.
I currently have 2 videos that show depending which 50% side of the browser the mouse is hovering and I want to apply a similar effect to animate some text.
I want the <p> tag to move up and fade in while moving the <h1> tag up at the same time and in the same way, like this website:
Here's the kind of structure I'm working with for my <p> and <h1> tags:
<div class="caption_overlay">
<div class="caption_grid">
<div class="live_caption">
<h1>A mix of apartments and terrace homes</h1>
<a href="#"><p>Explore</p></a>
</div>
<div class="eat_caption">
<h1>A brand new public eat street</h1>
<a href="#"><p>Explore</p></a>
</div>
</div>
</div>
CSS
Current code for videos
.video_hover {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.video_hover::before {
content:"";
display:block;
width:50%;
height:100%;
position: absolute;
top: 0;
z-index:100;
}
.video_hover video {
display:block;
width: 100%;
height: 100%;
}
.live_video:hover video {
opacity:0;
}
.live_video::before {
right: 0;
}
.live_video:hover + .eat_video video {
opacity:1;
}
.eat_video video {
opacity:0;
}
.eat_video::before {
left: 0;
}
Example of code for text animation. I want the h1 and p tags to begin with padding-top: 100px; and remove or add padding depending on whether mouse is hovering left or right side of the screen like the website I referenced
.live_caption h1:hover, .eat_caption h1:hover {
padding-top: 0px;
-webkit-transition: .4s ease-in-out opacity;
-moz-transition: .4s ease-in-out opacity;
-o-transition: .4s ease-in-out opacity;
transition: .4s ease-in-out opacity;
}
.live_caption p:hover, .eat_caption p:hover {
padding-top: 0px;
opacity: 1;
-webkit-transition: .4s ease-in-out opacity;
-moz-transition: .4s ease-in-out opacity;
-o-transition: .4s ease-in-out opacity;
transition: .4s ease-in-out opacity;
}
A CSS-only approach can be achieved by nesting the caption markup (ie your <h1> and <p> tags) with the corresponding video elements in your existing page structure:
<div class="live_video video_hover">
<video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
</video>
<!-- Nest caption block with live_video video block -->
<div class="caption">
<h1>A mix of apartments and terrace homes</h1>
<a href="#">
<p>Explore</p>
</a>
</div>
</div>
By doing this, you can then specify CSS that modifies the transform property of the newly introduced .caption element (of each video) so that the "y translation" of respective captions are toggled between 0% and 100%, depending on the user interaction.
To achieve a smooth animated effect when those captions are translated, the transition property is applied to the transform property:
transition: transform ease-in-out 0.5s
Doing this causes the caption to smoothly animate between differenet transforms when the transform value changes.
In code, this solution can be implemented as:
.video_hover {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
/* Add this */
overflow: hidden;
}
.video_hover video {
display: block;
width: 100%;
height: 100%;
}
.video_hover::before {
content: "";
display: block;
width: 50%;
height: 100%;
position: absolute;
top: 0;
z-index: 100;
}
.live_video::before {
left: 0;
}
.eat_video::before {
right: 0;
}
.eat_video video {
visibility: hidden;
}
.live_video:hover video {
visibility: hidden;
}
.live_video:hover+.eat_video video {
visibility: visible;
}
/* New CSS begins */
/* Define common styling for caption blocks of either video */
.caption {
position: absolute;
bottom: 0;
width: 50%;
z-index: 150;
transition: transform ease-in-out 0.5s;
background: pink;
pointer-events: none;
}
/* Live video caption visible by default (out of view) */
.live_video .caption {
left: 0;
transform: translateY(100%);
}
/* Eat video caption hidden by default (out of view) */
.eat_video .caption {
right: 0;
transform: translateY(100%);
}
/* Animate eat video caption into view when hovering the pesudo element */
.live_video:hover .caption {
transform: translateY(0%);
}
/* Animate live video caption out of view when hovering the pesudo element */
.eat_video:hover .caption {
transform: translateY(0%);
}<div class="live_video video_hover">
<video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
</video>
<!-- Nest caption block with corresponding video to display with -->
<div class="caption">
<h1>A mix of apartments and terrace homes</h1>
<a href="#">
<p>Explore</p>
</a>
</div>
</div>
<div class="eat_video video_hover">
<video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="https://www.fbdemo.com/video/video/demo.mp4" type="video/mp4" >
</video>
<!-- Nest caption block with corresponding video to display with -->
<div class="caption">
<h1>A brand new public eat street</h1>
<a href="#">
<p>Explore</p>
</a>
</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments