Wie erreiche ich diesen bestimmten Hover-Effekt?

Ich versuche, this Hover-Effekt zu replizieren, aber ich bin mir sogar sicher, wo ich anfangen soll, um ehrlich zu sein.Wie erreiche ich diesen bestimmten Hover-Effekt?

Hier ist mein HTML-Code:

<div class="row"> 
      <div class="col-sm-4 portfolio-item"> 
      <a href="#" class="thumbnail"> 
       <img src="img/portfolio/cabin.png"> 
      </a> 
      </div> 
      <div class="col-sm-4 portfolio-item"> 
      <a href="#" class="thumbnail"> 
       <img src="img/portfolio/game.png"> 
      </a> 
      </div> 
      <div class="col-sm-4 portfolio-item"> 
      <a href="#" class="thumbnail"> 
       <img src="img/portfolio/circus.png"> 
      </a> 
    </div>

CSS: (alles was ich habe)

#portfolio .portfolio-item { 
    background-color: #18BC9C; 
    transition: all ease .5s; 
    -webkit-transition: all ease .5s; 
} 

#portfolio .portfolio-item:hover { 

}

Ich weiß nicht einmal, wo man anfangen soll. Ich denke, ich muss etwas mit dem Z-Index und der Deckkraft beheben, aber ich weiß nicht, wo ich es einstellen soll, und ich bin mir auch nicht sicher, wo ich den Übergangseffekt setzen soll. Alles, was ich ausprobiert habe, hat nicht funktioniert, wenn mir jemand zeigen könnte, wie man diesen Hover-Effekt aus einer sauberen Weste erreicht, die sehr geschätzt würde.

Quelle

2016-11-19 Anonymous

Sie können ein Pseudoelement verwenden ::after ein Overlay zu erstellen. Verwenden Sie einfach opacity: 0;, um es auszublenden, und zeigen Sie es bei Hover: opacity: 0.6;. Als Übergang können Sie verwenden: transition: opacity ease .5s;.

Auf diese Weise können Sie für jedes Bild eine Farbüberlagerung erstellen (wäre nicht möglich, wenn nur Hintergrund für das Elternelement verwendet wird). Zum Erstellen der Lupe können Sie entweder <span> innerhalb des Tags <a> oder das andere Pseudoelement ::before verwenden.

.portfolio-item a { 
 
    position: relative; 
 
} 
 
.portfolio-item a::after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #457647; 
 
    opacity: 0; 
 
    transition: opacity ease .5s; 
 
} 
 
.portfolio-item a:hover::after { 
 
    opacity: 0.6; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-sm-4 portfolio-item"> 
 
    <a href="#" class="thumbnail"> 
 
     <img src="//placehold.it/200x100/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-sm-4 portfolio-item"> 
 
    <a href="#" class="thumbnail"> 
 
     <img src="//placehold.it/200x100/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-sm-4 portfolio-item"> 
 
    <a href="#" class="thumbnail"> 
 
     <img src="//placehold.it/200x100/fff"> 
 
    </a> 
 
    </div> 
 
</div>

Natürlich müssen Sie Anbieter Präfixe für ältere Browser verwenden. Stellen Sie außerdem sicher, dass Ihr Markup gültig ist - ein schließendes Div-Tag fehlt.

Quelle

2016-11-19 21:23:57 andreas

Wieder macht Ihre Erklärung Sinn für mich, aber wenn ich versuche, dies auszuführen, funktioniert es nicht. Sie verwenden sogar die Miniatur-Klasse wie ich selbst und es funktioniert ohne Probleme. Wie kommt es, dass Sie auf den Link und nicht auf das Bildelement zielen? –

Was genau funktioniert nicht? Welcher Browser? Funktioniert mein Beispiel für Sie? – andreas

Entschuldigung, ich hätte genauer sein sollen.Nichts ändert sich, wenn ich über die Bilder schwebe. Das einzige, was passiert, ist, dass die Grenze leicht blau wird, und das liegt an der Thumbnail-Klasse im Bootstrap. Ich verwende eine moderne Version von Google Chrome unter Windows 10. Ja, das obige Beispiel funktioniert, und es ist genau das, was ich auf meine Bilder anwenden möchte, nur eine etwas andere Farbe. Ich habe Ihren Code in mein CSS kopiert, die Farbe bearbeitet, gespeichert, in Chrom aktualisiert und nichts hat sich geändert. Du magst explication macht Sinn für mich, aber aus irgendeinem Grund gibt es keine Änderungen nach dem Speichern und Aktualisieren –

Im Abschnitt .portfolio-item:hover können Sie neue Werte für zuvor angegebene Attribute festlegen, die Sie transformieren möchten. Wenn Sie zum Beispiel Portfolio-Artikel setzen, wird schwarz. Sie können auch opacity: 1; für portfolio-item und opacity: 0; für portfolio-item:hover angeben. Schauen Sie sich exaple:

.portfolio-item { 
 
    background-color: #18BC9C; 
 
    opacity: 1; 
 
    transition: all .7s ease ; 
 
    -webkit-transition: all .7s ease ; 
 
} 
 

 
.portfolio-item:hover { 
 
    background-color: #14C; 
 
    opacity: .5; 
 
}

<div class="row"> 
 
      <div class="col-sm-4 portfolio-item"> 
 
      <a href="#" class="thumbnail"> 
 
       <img src="img/portfolio/cabin.png"> 
 
      </a> 
 
      </div> 
 
      <div class="col-sm-4 portfolio-item"> 
 
      <a href="#" class="thumbnail"> 
 
       <img src="img/portfolio/game.png"> 
 
      </a> 
 
      </div> 
 
      <div class="col-sm-4 portfolio-item"> 
 
      <a href="#" class="thumbnail"> 
 
       <img src="img/portfolio/circus.png"> 
 
      </a> 
 
    </div> 
 
    </div>

Quelle

2016-11-19 21:21:50 Banzay

Ihr Beispiel macht , aber aus irgendeinem Grund wird es immer noch nicht für mich arbeiten. Ich denke vielleicht, weil es etwas mit der Thumbnail-Klasse von Boostrap zu tun hat? Das ist das einzige, was mir momentan einfällt, weil alles andere korrekt eingerichtet ist und Ihr Beispiel funktioniert. –

Hallo, das wird Ihnen helfen. Erstellen Sie zuerst eine Overlay-Opazität 0 und schreiben Sie dann ein kleines jQuery, so dass beim Hover einer Klasse die Opazität 1 mit einem rgba (rgb mit Deckkraft) und einem css-Übergang angewendet wird.

Sehen Sie den Code für mehr, und mit diesem laufen, wenn Sie Ich mag das Overlay aus dem Bild getrennt haben, so dass Sie die Kontrolle über sie beide haben:

$(document).ready(function() { 
 
    $('.portfolio-item') 
 
    .mouseover(function() { 
 
    $(this).find('.overlay').addClass('show'); 
 
    }) 
 
    .mouseout(function() { 
 
    $(this).find('.overlay').removeClass('show'); 
 
    }); 
 
});

* { 
 
-webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
box-sizing: border-box; 
 
} 
 

 
.col-sm-4 { 
 
    float: left; 
 
    width: 33%; 
 
    position: relative; 
 
    } 
 

 
img { 
 
width: 100%; 
 
    display: block; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: rgba(145,0,0,0.5); 
 
    z-index: 2; 
 
    width: 100%; 
 
    height: auto; 
 
    opacity: 0; 
 
    -webkit-transition: .3s ease-in opacity; 
 
    -moz-transition: .3s ease-in opacity; 
 
    transition: .3s ease-in opacity; 
 
    } 
 

 
.overlay.show { 
 
opacity: 1; 
 
} 
 

 
.overlay.show:after { 
 
    content: 'x'; 
 
    color: white; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="row"> 
 
      <div class="col-sm-4 portfolio-item"> 
 
      <div class="overlay"></div> 
 
      <a href="#" class="thumbnail"> 
 
       <img src="http://placehold.it/100x50"> 
 
      </a> 
 
      </div> 
 
      <div class="col-sm-4 portfolio-item"> 
 
      <div class="overlay"></div> 
 
      <a href="#" class="thumbnail"> 
 
       <img src="http://placehold.it/100x50"> 
 
      </a> 
 
      </div> 
 
      <div class="col-sm-4 portfolio-item"> 
 
      <div class="overlay"></div> 
 
      <a href="#" class="thumbnail"> 
 
       <img src="http://placehold.it/100x50"> 
 
      </a> 
 
    </div>

Sinn

Quelle

2016-11-19 22:27:11

Wie erreiche ich diesen bestimmten Hover-Effekt?

Antwort

Verwandte Themen