CSS (Transition) After a Pseudo Element - How to Transition Content That Shows on Hover

Add transition to hover after pseudo

It's hard to reproduce from your code but there's a few main problems:

• Your pseudo element has top:100% so it's probably hanging off the bottom of the screen somewhere. You can use position:relative on the container to prevent this.

• It's a bad idea to put text into pseudo elements. As another commenter pointed out, they can't be picked up by screen readers. Here's an in-depth article on the w3 website about this.

• You absolutely do not want to transition something for 6 seconds! Try to stick to half a second maximum or your UI will feel slow. Here's a great writeup on the subject.

And finally, a full snippet combining the above suggestions. This is not perfect by any means, but it should be enough to get you started:

.container {
  position: relative;
  padding:10px;
  font-family:'Arial';
  border:1px solid black;
}

.container .tooltip {
  opacity: 0;
  transition: opacity 0.4s ease-out;
  position: absolute;
  top: 100%;
  left: 0;
  height: 20px;
  padding:10px;
  font-size: 13px;
}

.container .primary:hover .tooltip {
  opacity: 1;

}

<div class="container">
  <div class="primary">div
  <div class="tooltip">"Go through a list of friends to remove"</div>
  </div>
</div>

Using CSS transition on ::before pseudo element

On the hover you probably only want the css related to the transition, not the actual styles for the pseudo element. Try this

.posts .img-hover:before {
    content: '';
    display: block;
    background: url("img/Texture1.png");
    width: 320px; /* image width */
    height: 220px; /* image height */
    position: absolute;
    top: 13px;
    right: 2px;
    opacity: 0;
    -webkit-transition: opacity 1.2s ease;
    -moz-transition: opacity 1.2s ease;
    -ms-transition: opacity 1.2s ease;
    -o-transition: opacity 1.2s ease;
    transition:  opacity 1.2s ease-out;
}
.posts .img-hover:hover:before{
    opacity: 1;
}

CSS Transition on the 'content' property of :before pseudo element

You can't apply transition to pseudo elements content property's content itself. You can apply transition to a pseudo element's opacity, width, height, its content's font-size and many more properties... but not the content property's content.

How to fade in and out a CSS “:after” pseudo element on hover?

i have add same css please check your help full

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );@import url( 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
.adminDemoVideo {  position: relative;  display: inline-block;  transition:all 0.3s ease;  }.adminDemoVideo:after {    content: '\f04b';    z-index: 5;    position: absolute;    left: 50%;    top: 50%;    transform: translate( -50%, -50% );    padding: 3px 15px 3px 25px;    color: white;    font-family: 'FontAwesome';    font-size: 50px !important;    background-color: rgba(23, 35, 34, 0.75);    border-radius: 5px 5px 5px 5px;    -webkit-transition: all 1s;    transition: all 1s;    opacity:0;}

.adminDemoVideo:hover:after {       opacity:1;}

<div class="adminDemocontainer"><a href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo">  <img src="http://placehold.it/1200x800/fc0" class="img-responsive"></a></div>

How to make main content move on hover and keep before/after pseudo-element static?

Try this:

<style>
    .shadow {
        background-color: black;
        border-radius: 7px;
        width: fit-content;
        min-width: 300px;
        position: relative;
        left: 200px;
        top: 100px;
        font-family: 'Courier New', Courier, monospace;
    }
    
    .button {
        background-color: orange;
        position: relative;
        right: 0px;
        bottom: 0px;
        padding: 20px;
        border-radius: 7px;
        width: 300px;
        transition: all 0.5s ease;
    }
    
    .button:hover {
        position: relative;
        right: 40px;
        bottom: 40px;
    }
</style>

<body>
    <div class="shadow">
        <div class="button">
            <h3 class="text">Title</h3>
            <p>Consectetur sit est dolor quis do occaecat nostrud culpa dolor. Occaecat aute qui anim dolore proident. Cupidatat consequat esse ex ex. Velit fugiat sint in excepteur ut duis excepteur enim reprehenderit fugiat laborum laborum excepteur. Sunt
                dolore tempor id dolor voluptate adipisicing consequat nulla amet cupidatat commodo.</p>
        </div>
    </div>
</body>

Trigger CSS animation when hovering over pseudo element?

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>

Transition doesn't work on pseudo-element

Two main issues here. First, you're adding a transition the the anchor element, not it's "::before" pseudo-element. Secondly, you're setting no inital state for the pseudo-element, you're setting everything on hover. If you want to transition you need an initial state and an end state. For example:

.wrap {
    margin-top: 50px;
    a {
        position: relative;
        display: inline-block;

        &::before{
            -webkit-transition: all 1s;
            -moz-transition: all 1s;
            -o-transition: all 1s;
            -ms-transition: all 1s;
            transition: all 1s;
            content: '';
            border: 0 solid #ffffff;
            opacity: 0;
            width: 90px;
            height: 90px;
            position: absolute;
            left: 0;
            top: 0;
        }

        &:hover {
            &::before {
                border: 7px solid #ffffff;
                opacity: .7;
            }
        }

    }
}

Notice the transition is on the pseudo element, and I've set the initial values for the inital state for this element (opacity: 0 + border: 0)

---

Related Topics