CODEWITHSUNDEEP
csscss-transitionscss-animationsloading
Ahtsham Ul Haq
Ahtsham Ul Haq

Reputation: 51

How can i make the overlay of an image slide right to appear the image in css3 animations

I am making a page-loader in CSS and i want to appear the logo with sliding overlay to right, like the loading bar but here want to make loading logo instead of bar. So here is my code

.underlay{
    width: 300px;
    height:300px;
    margin-left: 300px;
    margin-top: 15%;
 }
.underlay:before{
    content:"";
    width: 300px;
    height:300px;
    position: absolute;
    top: 15%;
    left: 300px;
    z-index: 99;
    background: rgba(0,0,0,0.9);
    animation-name: slide;
}

<div class="outer">
<div class="underlay">
    <img src="logo.png" alt="loading logo">
</div>
</div>

I expect to slide it underlay:before to slide to right slowly

Upvotes: 1

Views: 474

Answers (2)

Ahtsham Ul Haq
Ahtsham Ul Haq

Reputation: 51

I have this and it works for me. Thanks for helping me out @Asiya Fatima

.underlay:before{
    content:"";
    width: 300px;
    height:300px;
    position: absolute;
    top: 200px;
    left:0;
    z-index: 99;
    background: rgba(0,0,0,0.9);
    animation-name: slide;
    animation-duration: 7s;
    animation-timing-function: linear;
}
@-webkit-keyframes slide{
    0%{
        left:510px;
    }
    100%{
        left:850px;
    }
}

Upvotes: 1

Asiya Fatima
Asiya Fatima

Reputation: 1438

@Ahtsham Ul Haq: Try this code hope it will work for you!

.outer {
 transition: all 0.3s linear;
}
.underlay img {
    width: 300px;
    height:300px;
  display: block;
  left: 10px
/*     margin-left: 300px; */
/*     margin-top: 15%; */
 }
.underlay:before{
    content: "";
    width: 300px;
    height: 300px;
    position: absolute;
    top: 10px;
/*     left: 300px; */
    z-index: 99;
    background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s linear;
}
.outer:hover .underlay:before { 
  width: 0;
}
<div class="outer">
<div class="underlay">
    <img src="https://i.ibb.co/8M3cFG4/bbb.jpg" alt="loading logo">
</div>
</div>

Upvotes: 1

Related Questions