Portfolio Hover Effekt
Im folgenden Beitrag werde ich einen kleinen Hover Effekt vorstellen, den du optimal für dein Portfolio nutzen kannst. Wir brauchen dazu lediglich HTML und CSS. Da der Effekt hier nicht zu 100% umzusetzen war, kannst du dir ihn hier anschauen.
Portfolio
<div class="portfolio_wrapper">
<div class="portfolio_overlay">
<h3>Mustang</h3>
<p>Dies könnte ein Beschreibungstext zum Portfolio sein. </p>
</div>
<div class="portfolio_underlay">
<img src="mustang.jpg" >
</div>
</div>
Dies ist der einzige HTML- Code den wir benötigen. Wir haben einen Wrapper, der die Over- und Underlay Container beinhaltet. In diesen zwei Containern liegt der Inhalt, wobei der Overlay Container nicht zu sehen ist.
Der CSS Teil:
.portfolio_wrapper {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
display: flex; /* Alle folgenden Elemente werden Flexboxen */
align-items: center; /* zentriert die Flexboxen */
justify-content: center; /* zentriert die Flexboxen */
float: left; /* Wrapper- Boxen werden nebeneinander dargestellt */
}
Die Wrapperklasse gibt die Größe vor und ist eine Flexbox. Dies ist wichtig, da alle Kinderelement ebenfalls Flexboxen werden. Dadurch können diese Kinderelemente einfach zentriert werden. Zudem werden die Wrapperboxen ( falls es mehrerer sind) neben einander angezeigt (mit float: left;).
.portfolio_overlay {
height: 0%; /* Box wird nicht unsichtbar */
width: 0%; /* Box wird nicht unsichtbar */
transition:300ms ease-in-out; /* sorgt dafür, dass der Effekt wie eine Animation aussieht */
background-color: black;
opacity: 0.8;
overflow: hidden;
position: absolute;
}
Das Overlay wird nicht angezeigt, da es keine Breite und keine Höhe hat. Der Befehl Transition ist später für den Effekt sehr wichtig, denn er sorgt dafür, dass es wie eine Animation aussieht. Ohne ihn würde das Element nur von seinem Anfangszustand zu seinem Endzustand "springen". Damit Overlay und Underlay auch wirklich übereinander liegen, müssen es absolut positioniert werden.
.portfolio_wrapper:hover .portfolio_overlay {
width: 90%; /* Sobald die Maus auf der Box ist, wird .portfolio_overlay sichtbar, da die Breite und Weite auf 90% gesetzt werden */
height: 90%;
}
.portfolio_wrapper:hover .portfolio_underlay>img {
width: 120%; /* Das Bild wird etwas vergrößert */
}
Um den Effekt auszulösen wird ein Hover- Event verwendet. Sobald die Maus also den Wrapper berührt, wird dem Overlay eine Breite und Höhe zugewiesen, somit wird die Box sichtbar.
Der zweite Effekt lässt lediglich das Bild etwas größer werden.
Der zweite Effekt lässt lediglich das Bild etwas größer werden.
Kommentare
Kommentar veröffentlichen