Opazität eines Bildes kann nicht geändert werden

Ich versuche, die Deckkraft meiner Bilder zu ändern, damit ich später einen Hover-Effekt verwenden kann, um die Deckkraft zurück zu ändern und einen kühlen Effekt zu erzeugen. Das Problem ist, dass das Opazitätsattribut nicht funktioniert! Ich kann die Lösung nicht finden. Ist es möglich, dass Bootstrap das irgendwie verhindert?Opazität eines Bildes kann nicht geändert werden

Mein HTML:

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <!-- Required meta tags always come first --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
    <link rel="stylesheet" href="css/style.css"> 
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet"> 
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> 

</head> 
<body> 
    <!-- HEADER --> 
    <section id="header"> 

     <h1 class="name">Jessica Shae</h1> 


     <div class="container heading"> 
      <div class="row"> 

       <div class="col-md-4"> 
        <img src="img/7.jpg" class="display"> 
       </div> 
       <div class="col-md-4"> 
        <img src="img/2.jpg" class="display"> 
       </div> 
       <div class="col-md-4"> 
        <img src="img/9.jpg" class="display"> 
       </div> 

     <div class="row"> 
       <div class="col-md-12 text-xs-center"> 
        <a href="#gallery"<i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i></a> 

       </div> 
      </div> 

    </section> 

    <!-- Gallery --> 

    <section id="gallery"> 

     <h2 class="title">The Dark Room</h2> 

     <div class="container photo-collection"> 
      <div class="row"> 

       <div class="col-md-4 affect"> 
        <img src="img/1.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/10.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/4.jpg" class="work"> 
       </div> 
      </div> 

      <div class="row"> 

       <div class="col-md-4 affect"> 
        <img src="img/18.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/6.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/8.jpg" class="work"> 
       </div> 
      </div> 

      <div class="row"> 

       <div class="col-md-4 affect"> 
        <img src="img/12.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/11.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/14.jpg" class="work"> 
       </div> 
      </div> 

     </div> 

    </section>

Und mein CSS: (die Opazität Attribut ist in .affect)

* { 
     /*background-color: rgb(0, 0, 0);*/ 
     background: #070606; 
    } 

    /* HEADER */ 

    .display { 
     height: auto; 
     width: 500px; 
     box-sizing: border-box; 
     overflow: hidden; 
     overflow-x: hidden; 
     max-width: 100%; 
     border: 4px solid white; 
     border-radius: 6%; 
    } 

    .heading { 
     max-width: 100%; 
    } 

    .name { 
     font-family: 'Oswald', sans-serif; 
     text-transform: uppercase; 
     font-size: 500%; 
     font-weight: 100; 
     text-align: center; 
     color: whitesmoke; 
     width: 100%; 
     margin-bottom: 20px; 
     margin-top: 15px; 
    } 

    h1:after { 
     display: block; 
     height: 2px; 
     background-color: #e62222; /*Great way to give single line color */ 
content: " "; 
     width: 100px; 
     margin: 0 auto; 
     margin-top: 20px; 
    } 

    .fa { 
     margin-top: 18px; 
    } 

    .fa:link, /*Prevents color change when clicked */ 
    .fa:visited { 
     text-decoration: none; 
     color: #bdc3c7; 
    } 

    .fa:hover, 
    .fa:active { 
     color: #ebedee; 
    } 

    /* GALLERY */ 

    .work { 
     width: 300px; 
     height: 100%; 
     margin-top: 50px; 
     border: 3px solid white; 
    } 

    .title { 
     font-family: 'Prociono', serif; 
     font-size: 350%; 
     color: whitesmoke; 
     text-align: center; 
     padding-top:40px; 

    } 

    .affect img { 
     opacity: 1; 
     background-color: #070606; 
    }

Quelle

2016-11-02 Temple Naylor

Weitere Informationen zu [CSS-Deckkraft] (https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) finden Sie hier. – jacefarm

Sie benötigen einen Basisstatus und einen Hover-Status für Ihr Bild. Ändern Sie Ihr CSS in:

.affect img { 
     opacity: 0.2; 
     background-color: #070606; 
     transition: opacity .35s; 
    } 

    .affect:hover img { 
     opacity: 1; 
    }

Dies erstellt den Hover-Effekt.

Quelle

2016-11-02 03:25:05 Sasith

Ah, ich wusste nicht, dass ich einen Hover-Status erstellen musste, damit es funktioniert. Vielen Dank. –

Glücklich, Ihnen zu helfen. Danke auch an @jacefarm für den Schnitt. – Sasith

Opazität Standardwert ist 1 versuchen es 0.5 machen.

Quelle

2016-11-02 03:24:18

Opazität eines Bildes kann nicht geändert werden

Antwort

Verwandte Themen