• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Hover Effekt aufsetzen CSS

Edu

Neues Mitglied
Hallo Ihr Lieben,

seit etwas längerem beschäftige ich mich mit der Hover Funktion.

Leider habe ich nun einiges ausprobiert, dennoch ist das Ergebnis nicht zufriedenstellend.

Vorab zur Info CSS, HTML Skills sind entwicklungsbedürftig, stehe noch ganz am Anfang.

Ich bin der Anweisung dieser Page gefolgt...


Gerne würde ich den Hove Square.Effect4 [http://gudh.github.io/ihover/dist/index.html] umsetzen wollen...leider bis jetzt ohne Erfolg.

Der Quellcode der einzelnen Effekte findet sich hier wieder...https://github.com/gudh/ihover/blob/gh-pages/dist/styles/main.css

So gestaltet sich mein Quellcode nach deren Anleitung...

Quellcode<style>
.square.ih-item {
BORDER-TOP: #fff 8px solid; HEIGHT: 216px; BORDER-RIGHT: #fff 8px solid; WIDTH: 216px; BORDER-BOTTOM: #fff 8px solid; POSITION: relative; BORDER-LEFT: #fff 8px solid; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3)
}
.square.ih-item .info {
RIGHT: 0px; POSITION: absolute; TEXT-ALIGN: center; LEFT: 0px; TOP: 0px; BOTTOM: 0px; -webkit-backface-visibility: hidden; backface-visibility: hidden
}
.effect4.square.ih-item {
OVERFLOW: hidden; POSITION: relative
}
.colored.effect4.square.ih-item .info {

}
.colored.effect4.square.ih-item .mask1 {
BACKGROUND: #1a4a72
}
.colored.effect4.square.ih-item .mask2 {
BACKGROUND: #1a4a72
}
.effect4.square.ih-item .img {
-webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out
}
.effect4.square.ih-item .mask1 {
HEIGHT: 361px; WIDTH: 361px; BACKGROUND: #333333; POSITION: absolute; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out
}
.effect4.square.ih-item .mask2 {
HEIGHT: 361px; WIDTH: 361px; BACKGROUND: #333333; POSITION: absolute; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out
}
.effect4.square.ih-item .mask1 {
RIGHT: 0px; LEFT: auto; TOP: 0px; -webkit-transform: rotate(56.5deg) translateX(-180px); -moz-transform: rotate(56.5deg) translateX(-180px); -ms-transform: rotate(56.5deg) translateX(-180px); -o-transform: rotate(56.5deg) translateX(-180px); transform: rotate(56.5deg) translateX(-180px); -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%
}
.effect4.square.ih-item .mask2 {
LEFT: 0px; TOP: auto; BOTTOM: 0px; -webkit-transform: rotate(56.5deg) translateX(180px); -moz-transform: rotate(56.5deg) translateX(180px); -ms-transform: rotate(56.5deg) translateX(180px); -o-transform: rotate(56.5deg) translateX(180px); transform: rotate(56.5deg) translateX(180px); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%
}
.effect4.square.ih-item .info {
HEIGHT: 0px; WIDTH: 361px; BACKGROUND: #111111; VISIBILITY: hidden; -webkit-transition: all 0.35s ease-in-out 0.35s; -moz-transition: all 0.35s ease-in-out 0.35s; transition: all 0.35s ease-in-out 0.35s; -webkit-transform: rotate(-33.5deg) translate(-112px, 166px); -moz-transform: rotate(-33.5deg) translate(-112px, 166px); -ms-transform: rotate(-33.5deg) translate(-112px, 166px); -o-transform: rotate(-33.5deg) translate(-112px, 166px); transform: rotate(-33.5deg) translate(-112px, 166px); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%
}
.effect4.square.ih-item .info H3 {
FONT-SIZE: 17px; BACKGROUND: none transparent scroll repeat 0% 0%; TEXT-TRANSFORM: uppercase; COLOR: #fff; PADDING-BOTTOM: 10px; TEXT-ALIGN: center; PADDING-TOP: 10px; PADDING-LEFT: 10px; MARGIN-TOP: 5px; PADDING-RIGHT: 10px; opacity: 0; -webkit-transition: all 0.35s ease-in-out 0.35s; -moz-transition: all 0.35s ease-in-out 0.35s; transition: all 0.35s ease-in-out 0.35s
}
.effect4.square.ih-item .info P {
FONT-SIZE: 12px; POSITION: relative; COLOR: #bbb; PADDING-BOTTOM: 20px; FONT-STYLE: italic; TEXT-ALIGN: center; PADDING-TOP: 20px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; opacity: 0; -webkit-transition: all 0.35s ease-in-out 0.35s; -moz-transition: all 0.35s ease-in-out 0.35s; transition: all 0.35s ease-in-out 0.35s
}
.effect4.square.ih-item A:hover .mask1 {
-webkit-transform: rotate(56.5deg) translateX(1px); -moz-transform: rotate(56.5deg) translateX(1px); -ms-transform: rotate(56.5deg) translateX(1px); -o-transform: rotate(56.5deg) translateX(1px); transform: rotate(56.5deg) translateX(1px)
}
.effect4.square.ih-item A:hover .mask2 {
-webkit-transform: rotate(56.5deg) translateX(-1px); -moz-transform: rotate(56.5deg) translateX(-1px); -ms-transform: rotate(56.5deg) translateX(-1px); -o-transform: rotate(56.5deg) translateX(-1px); transform: rotate(56.5deg) translateX(-1px)
}
.effect4.square.ih-item A:hover .info {
HEIGHT: 120px; WIDTH: 300px; TOP: 40px; VISIBILITY: visible; -webkit-transform: rotate(0deg) translate(0, 0); -moz-transform: rotate(0deg) translate(0, 0); -ms-transform: rotate(0deg) translate(0, 0); -o-transform: rotate(0deg) translate(0, 0); transform: rotate(0deg) translate(0, 0)
}
.effect4.square.ih-item A:hover .info H3 {
opacity: 1
}
.effect4.square.ih-item A:hover .info P {
opacity: 1
}</style>

<div class="col-sm-6"> <!-- colored --> <div class="ih-item square colored effect4"><a href="#"> <div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div> <div class="mask1"></div> <div class="mask2"></div> <div class="info"> <h3>Heading here</h3> <p>Description goes here</p> </div></a></div> <!-- end colored --> </div> </div>

Wo ist mein Denkfehler. Ich bekomme diese Effekt nicht angezeigt. Fehlt hier an der Stelle etwas?

Vielen Dank für euren Support.

Liebe Grüße
 
Werbung:
Also, ich bin schon mal begeistert, dass bei Ihnen die Funktion schon mal funktioniert. Bei mir tut sich nichts. Es sieht leider auch noch nicht so aus wie das wie in dem Beispiel auf der Page im Hover Effekt 4 angezeigt wird.

1. Frage...Es sollte doch aus dem Quellcode das Ergebnis 1 zu 1 hervorgehen?, fehlt uns etwas an der Stelle?, schließlich hat die Dame auf Ihrer Seite es ebenfalls umgesetzt?

2. Ich habe nur einen HTML Editor, also versuche ich div und syle in Einklang zu bringen. auch wenn ich Ihren Quellcode kopiere und dort implementiere, versagt es total.

Ich bin über jede Hilfe dankbar.

Liebe Grüße
 
Werbung:
Ok. Ich versuche es mal.

Es macht nicht mal diesen Effekt. Bei Ihnen und in dem Hover Effekt auf der Page ist der Effekt durchsichtig und kommt mit einer Drehung eingeflogene. Das geht nicht. funktioniert nicht.

Meine Frage auch wenn Sie es eingebunden habe und es funktioniert bei Ihnen, warum sieht es noch nicht so aus wie auf der Vorlage...was müssen Sie noch einstellen...Die Frau hat es genau beschrieben und dennoch fungiert das Ganze nicht auf der Art und Weise.

Ich habe nur einen HTML Editor und dort schmeisse ich beide Quellcodes hinein...dennoch ohne erfolg, das Ergebnis ist nicht das wie bei Ihnen.
 
nur das kommt und mehr nicht...er zeit nur das bild dahinter und wenn ich drauf gehe dann hat er nur dieses vorne mehr nicht...5163
 
Werbung:
mich würde es auch mal ineterssieren, würdest du den Effekt genau abbilden können wie auf der page dargestellt mit dem hover effect4. Danke
 
Es macht nicht mal diesen Effekt. Bei Ihnen und in dem Hover Effekt auf der Page ist der Effekt durchsichtig und kommt mit einer Drehung eingeflogene. Das geht nicht. funktioniert nicht.
Das heißt mein Fiddle funktioniert beir dir auch, nur auf deiner Homepage nicht?

Dann wäre ein Link zur Seite wünschenswert.
 
Werbung:
Chrome funkt. so wie bei dir :), kannst du mir vllt helfen, das es genauso abgebildet wird wie auf der Page...
Dazu müsste ich halt auch mal deinen Link zur Page haben. Nicht zu der, wo der Effekt als Demo dargestellt ist, sondern zu DEINER Homepage, wo der Effekt nicht funktioniert.
 
Leider nicht möglich. Ich würde es begrüßen wenn es möglich wäre, dass man mit der Anleitung der Dame und der Page sowie dem Quellcode, diesen Hover abgebildet bekommt. Dann würde ich es auf der Page einbinden können.
 
Werbung:
Soweit haben wir es geschafft, dass es bei uns gleich aussieht und funktioniert. Aber immer noch nicht wie auf der Demo Page. Das ist mein Ziel.
 
Werbung:
Aaron hast du es evtl. versuchen können? Vielen Dank

Nur weil du den Thread zuspammst, antwortet dir niemand schneller. Eher im Gegenteil.
Sinnvoller wäre es, die Zeit in eine nachvollziehbare Fehlerbeschreibung zu stecken, oder einen Testcase bereitzustellen - wenn es schon ein Problem ist den Link zur Seite zu posten...
 
Vielen Dank für euren Support. Lösung gefunden und es hat auch funktioniert. Beitrag bitte schließen.
 
Werbung:
Zurück
Oben