CODEWITHSUNDEEP
htmlcss
Go Clean
Go Clean

Reputation: 1

How do i remove border that were created from animation

this is my first time here ! let's see !

i am about 1 week new to coding. I tried to put an animation on an image , it's working. The only problem is that

html, body {
    height: 100%;
}

body {
    margin: 0%;
}

nav {
    display: flex;
    width: 100%;
    height: 20%;
    background-color: transparent;
    margin-top: 20px;
    align-content: center;
    justify-content: center;
    
    
    
    
}

.logo { 
    
    padding-left: 10px;

}

a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.8);
    margin: 0 50px;
    padding-top: 70px;
    
    
}

a:hover { 
    color: gray;

}

header nav h1 
{
    font-size: 25px;
    padding-right: 100px;
    
}

.container {
    
    text-align: center;
    align-content: center;
}
.papier {
    min-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(Images/papier.png);
    width: 100%;
    height: 100%;
    padding-bottom: -200px;
    border-style: hidden;
    
}

    
    .slide {
    -moz-animation: showHide 0.5s ; /* Firefox */
    -webkit-animation: showHide 0.5s ; /* Safari and Chrome */
    -ms-animation: showHide 0.5s ; /* IE10 */
    -o-animation: showHide 0.5s ; /* Opera */
    animation-duration: 7s;
        overflow: hidden

    }

}
@-webkit-keyframes showHide { /* Chrome, Safari */
     1% {width:0%}
    20% {width:20%;}
    40% {width:40%;}
    60% {width:60%;}
    80% {width:80%;}
    100% {width:100%;}
    overflow: hidden
 
    
}
@-ms-keyframes showHide { /* IE10 */
      1% {width:0%}
    20% {width:20%;}
    40% {width:40%;}
    60% {width:60%;}
    80% {width:80%;}
    100% {width:100%;}
    overflow: hidden
}
@-o-keyframes showHide { /* Opera */
      1% {width:0%}
    20% {width:20%;}
    40% {width:40%;}
    60% {width:60%;}
    80% {width:80%;}
    100% {width:100%;}
    overflow: hidden
}
@keyframes showHide {
     1% {width:0%}
    20% {width:20%;}
    40% {width:40%;}
    60% {width:60%;}
    80% {width:80%;}
    100% {width:100%;}
    overflow: hidden

}
    

.topnav
{
    overflow: hidden;
    float: right;
    background-color: transparent;
    border-style: hidden;
    border: transparent;
    
    
    
}

.topnav input[type=text]

{
    text-align: center;
    border-style: hidden;
    float: right;
    background-color: transparent;
    font-size: 13px;
    color: #404040;
    border: transparent;
    margin-top: 68px;
    
    
        
    
}
    
    
img {
    
    pointer-events: none;
    
}

::selection {
    background-color: transparent;
    color: #000;
}

html { *//
    background: url(Images/345.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



#t
{
    height: 20px;
    width: 20px;
    padding-left: 20px;
    margin-top: 68px;
    
}

#f {
    height: 20px;
    width: 20px;
    padding-left: 60px;
    margin-top: 66px;
    
    

}

#i {
    height: 18px;
    width: 18px;
    padding-left: 60px;
    margin-top: 68px;
    
}

.sectionleft {
    
    float: left;
}
   
.gauche{
    
    height: 500px;
    width: 400px;
    


}
<!DOCTYPE HTML>
<html>

<head>
<link href="styles.css" rel="stylesheet">
<link href="stylessheet.css" rel="stylesheet">
<meta carset="utf-8"> </head>
<title>Noemie Forcier.</title>

<body>
<header>
    <nav> <a href="">ABOUT</a> <a href="">ARTICLES</a> <a href="">PHOTOS</a> <a href="">VIDEOS</a>
        <h1>NOEMIE <br><span class="logo">FORCIER.</span></h1> <a href="">CONTACT</a> <img src="Images/twitter.png" id="t"> <img src="Images/insta.png" id="i"> <img src="Images/facebook.png" id="f">
        <div class="topnav">
            <input type="text" placeholder="Recherche.."> </div>
    </nav>
    <div class="slide"> <img class="papier"> </div>
</header>
<section>
    <div class="sectionleft"> <img class="gauche" src="Images/sectiongauche.jpg"> </div>
    <div class="sectionright"> </div>
</section>
<footer> </footer>
</body>

</html>

there is some weird borders on the right and on top as the image is fading in.

Is there anyway i can put them transparent ? i tried border-color and overflow hidden.

Upvotes: 0

Views: 750

Answers (2)

user14206391
user14206391

Reputation:

change

img {
    pointer-events: none;
}

to

img {
    pointer-events: none;
    border: none;
}

Upvotes: 1

avia
avia

Reputation: 1568

You can control the border properties of an alement like this

HTML


<img src="#">

CSS


img {
border:none!important; /* you can use the !important value if you need to override the style that the animation uses in its CSS library or bootstrap or whatever else you are using; !important will make that CSS instruction have priority over others [please note that in-line styling like this <img src="#" style="XX"> style has priority over !important */
}

Upvotes: 0

Related Questions