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...
www.ideenlounge.de
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...
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
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...

Crazy Hover-Effekte für Bilder mit Caption und Auszugstext
Hier bin ich mal über eine wirklich gigantische Sammlung an Hovereffekten gestolpert, die das Herz jeden Designers höher schlagen lässt. Und hier kommt für euch der Link zu dieser fantastischen Sammlung – erstellt von IAROUSE: http://gudh.github.io/ihover/dist/index.html Es gibt dort Effekte für...

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