Hover Effekt

[tomathen]

Hallo meine Lieben,

bin mal wieder am verzweifeln. Ich würde sehr gerne diesen netten Hover Effekt

http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

in NOF einbauen. Mir ist im Prinzip alles klar, css file und images. Was mir nicht klar ist, ist welchen Code ich in NOF wo einfüge um ein Foto mit diesem Hover hinzubekommen. Kann jemand helfen? Ich danke allen.
Gruß Tom

[nettesekel]

Ich denke, da wirst du wohl mit Code frickeln müssen...
das ist der QC der 4 Bilder in der ersten Demo... anpassen und in ein Textfeld einfügen...

Code: HTML5

1.             <div class="main">
2.                 <div class="view view-first">
3.                     <img src="images/1.jpg">
4.                     <div class="mask">
5.                         <h2>Hover Style #1</h2>
6.                         <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
7.                         <a href="#" class="info">Read More</a>
8.                     </div>
9.                 </div>  
10.                 <div class="view view-first">
11.                     <img src="images/2.jpg">
12.                     <div class="mask">
13.                         <h2>Hover Style #1</h2>
14.                         <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
15.                         <a href="#" class="info">Read More</a>
16.                     </div>
17.                 </div>  
18.                 <div class="view view-first">
19.                     <img src="images/3.jpg">
20.                     <div class="mask">
21.                         <h2>Hover Style #1</h2>
22.                         <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
23.                         <a href="#" class="info">Read More</a>
24.                     </div>
25.                 </div>  
26.                 <div class="view view-first">
27.                     <img src="images/4.jpg">
28.                     <div class="mask">
29.                         <h2>Hover Style #1</h2>
30.                         <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
31.                         <a href="#" class="info">Read More</a>
32.                     </div>
33.                 </div>  
34.             </div>

[tomathen]

Super nettesekel. Das war ja mal einfach. Klappt bestens. Nur noch eine dumme Frage. Woher kommt der Hintergrund wenn man den hover macht? Ich habe diesen file gar nicht in meinen assetts und er kommt trotzdem. Nicht das ich da auf irgendeine Seite zugreife wo der file liegt. Ich würde diesen file schon gerne in meinem Projekt haben? Du verstehst was ich meine? Vielen Dank

[nettesekel]

Welches Hintergrund-File?
Eigentlich wird bei hover doch dein hinterlegtes Bild nur transparent farbig maskiert und ein wenig skaliert wodurch dieser Animations-Effekt entsteht...

Skaliert das Bild bei hover...

Code: HTML5

1. .view-first:hover img {
2.    -webkit-transform: scale(1.1,1.1);
3.    -moz-transform: scale(1.1,1.1);
4.    -o-transform: scale(1.1,1.1);
5.    -ms-transform: scale(1.1,1.1);
6.    transform: scale(1.1,1.1);
7. }
8.  

Bewirkt die transparent farbige Maske...

Code: HTML5

1. .view-first .mask {
2.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
3.    filter: alpha(opacity=0);
4.    opacity: 0;
5.    background-color: rgba(219,127,8, 0.7);
6.    -webkit-transition: all 0.4s ease-in-out;
7.    -moz-transition: all 0.4s ease-in-out;
8.    -o-transition: all 0.4s ease-in-out;
9.    -ms-transition: all 0.4s ease-in-out;
10.    transition: all 0.4s ease-in-out;
11. }

Du solltest dir mal den Web-Developer für den FF istallieren und damit mal ein wenig üben... 

[tomathen]

Stimmt wie immer nettesekel. Es handel sich dabei um das background bild
das bgimg.jpg heißt.

Das wird in der css style comman definiert

background: #fff url(../images/bgimg.jpg) no-repeat center

Jetzt habe ich dieses bild bgimg.jpg aber gar nicht in meine assets integriert, kommt aber trotzdem. 
Muss ich die Zeile in irgendeiner Form abändern um dann dieses image in meine assets/images einzufügen??
Das war der Punkt nicht der hover, ich Dussel

[nettesekel]

Und WO siehst du dieses Bild bei dir? 

Rufe es doch einfach mal auf der Quellseite auf... http://tympanus.net/Tutorials/OriginalHoverEffects/images/bgimg.jpg

Die Pfadangabe ist eine relative Pfadangabe...
../images/bgimg.jpg
wenn du die Datei nicht gerade in dein Projekt kopiert hast, dann kann sie auch nicht angezeigt werden. Offensichtlich fällt es also gar nicht auf ob du dieses Bild nutzt oder nicht. Keine Ahnung warum das da drin ist... vielleicht als fallback(?)... 

[tomathen]

Thanks man!! Machst du eigentlich auch irgendwann mal Urlaub?

[nettesekel]

Nö, kein Geld für... arbeite ja nur ehrenamtlich... 

[maulwurfmoeger]

Hallo zusammen,

ich muss das Niveau ein wenig runterziehen, sorry 

Ich find diese Hover Effekte auch toll, tue mich aber schwerer mit deren Umsetzung als tomathen 

Ich habe meine grauen Zellen angestrengt und wollte wie folgt vorgehen:

1. Zunächst mal für mein Projekt die Styleangaben festlegen. Dafür muss ich einen Code ins Layout HTML einfügen, zwischen den Head Tags (ich will das Ding nur auf einer Seite nutzen). Hier aber schon mein erstes Problem...wo finde ich diesen Code auf der Seite Original Hover Effects

Ist das der hier:

Code: HTML5

1. .view {
2.     width: 300px;
3.     height: 200px;
4.     margin: 10px;
5.     float: left;
6.     border: 10px solid #fff;
7.     overflow: hidden;
8.     position: relative;
9.     text-align: center;
10.     box-shadow: 1px 1px 2px #e6e6e6;
11.     cursor: default;
12.     background: #fff url(../images/bgimg.jpg) no-repeat center center
13. }
14. .view .mask, .view .content {
15.     width: 300px;
16.     height: 200px;
17.     position: absolute;
18.     overflow: hidden;
19.     top: 0;
20.     left: 0
21. }
22. .view img {
23.     display: block;
24.     position: relative
25. }
26. .view h2 {
27.     text-transform: uppercase;
28.     color: #fff;
29.     text-align: center;
30.     position: relative;
31.     font-size: 17px;
32.     padding: 10px;
33.     background: rgba(0, 0, 0, 0.8);
34.     margin: 20px 0 0 0
35. }
36. .view p {
37.     font-family: Georgia, serif;
38.     font-style: italic;
39.     font-size: 12px;
40.     position: relative;
41.     color: #fff;
42.     padding: 10px 20px 20px;
43.     text-align: center
44. }
45. .view a.info {
46.     display: inline-block;
47.     text-decoration: none;
48.     padding: 7px 14px;
49.     background: #000;
50.     color: #fff;
51.     text-transform: uppercase;
52.     box-shadow: 0 0 1px #000
53. }
54. .view a.info:hover {
55.     box-shadow: 0 0 5px #000
56. }

2. Jetzt den Code für die Bild/ Text Boxen in meiner Seite platzieren. Her kann ich ja sicher den Code von nettesekel übernehmen 

3. Fertig und bestaunen, oder so ähnlich...

Für Tipps und Tricks bedanke ich micht jetzt schon 

Beste Grüße

[nettesekel]

Dein "Fehler" liegt bei Punkt 1. 
Du benötigst ein wenig mehr als nur einen Schnipsel CSS-Angaben für dein Layout-html.

Wenn du auf dieser Seite auf "Download Source" klickst, erhältst du eine Zip-Datei. Entpacke sie und klicke die index.html an. Die Seite öffnet sich im Browser.
Das selbe kannst du mit den anderen index-Dateien machen, jede hat einen anderen Style, du kannst also wählen, welcher Style dir am besten gefällt.
Hast du dich für eine der index-Datein, bzw. deren Hover-Style entschieden, kannst du im Quelltext sehen, auf welche Style-Datein diese Seite zugreift.

Bei der index2.html wären das z.B. diese Angaben:
 

Code: HTML5

1.         <link rel="stylesheet" type="text/css" href="css/demo.css" />
2.         <link rel="stylesheet" type="text/css" href="css/style_common.css" />
3.         <link rel="stylesheet" type="text/css" href="css/style2.css" />

Die demo.css kannst du unberücksichtigt lassen, denn sie beinhaltet nur den Style der Demo.
Die style_common.css benötigst du soweit ich das überblicke bei allen Versionen, die dritte CSS-Datei, in meinem Falle die style2.css variiert je nachdem für welche Variante du dich entschieden hast. Du musst also die 2 für dich zutreffenden CSS-Dateien aus dem Ordner css deiner Zip-Datei in dein Projekt einbinden. Anleitung hierzu: https://www.nof-community.de/richtiger-umgang-mit-netobjects-fusion/externe-css-dateien-in-netobjects-fusion-einbinden/

Mit dem Rest deiner Ausführungen hast du richtig gelegen. Du musst natürlich den von mir geposteten Code anpassen und die verwendeten Bilder in dein Projekt einbinden... gutes Gelingen, du packst das... 

[maulwurfmoeger]

Danke für die Hilfe 

Ich tue mich schwer, aber es geht voran  Ich steig noch nicht ganz hinter das Prinzip, aber Übung macht den Meister
Im Moment sieht das so bei mir aus

Die zwei CSS Dateien habe ich in das Projekt eingebaut - glaube ich zumindest  Mit dem Rest bin ich aber noch auf dem Holzweg irgendwie - naja, neuer Tag, neues Glück 

Beste Grüße

[nettesekel]

Ich schau mal... 

[nettesekel]

Also die eine Style-Datei "style_common.css" ist da...

Die zweite "style1.css" ist leer... 0 Inhalt...
habe mir die gerade mal angesehen, die enthält Styleangaben die die fortschrittliche 13er nicht kennt und löscht. 
Die kannst du getrost aus den Assets wieder löschen, das wird so nichts. Die musst du dann einfach von Hand auf den Server schieben und die Verlinkung ebenso von Hand zwischen die Head-Tags der Seite schreiben.

Und die Bilder liegen nicht am angegebenen Ort:
http://www.anwalt-marx.de/html/images/1.jpg
http://www.anwalt-marx.de/html/images/2.jpg
http://www.anwalt-marx.de/html/images/3.jpg
http://www.anwalt-marx.de/html/images/4.jpg

[maulwurfmoeger]

Ich glaube, ich haue da alles gerade durcheinander...

Vielleicht darf ich euch nochmal kurz meine Vorgehensweise schildern - wenn ihr merkt, dass diese Sache eine Nummer zu groß für mich ist, dann sagt es mir ruhig - macht ja keinen Sinn, einem Eichhörnchen Tennis beizubringen 

1. Die für mich zutreffenden CSS Dateien muss ich in mein Projekt einbauen:

Diesen Code habe ich über meine Assetverwaltung reinbekommen

Code: HTML5

1. <link rel="stylesheet" type="text/css" href="css/style_common.css" />

Diesen Code habe ich von Hand auf den Server verschoben

Code: HTML5

1. <link rel="stylesheet" type="text/css" href="css/style2.css" />

2. Jetzt wende ich mich der CSS Datei zu:

Da übernehme ich die Vorlage aus der hier schon bekannten Vorlagenseite - und ab damit zwischen den head Tags:

Code: HTML5

1. .view {
2.     width: 300px;
3.     height: 200px;
4.     margin: 10px;
5.     float: left;
6.     border: 10px solid #fff;
7.     overflow: hidden;
8.     position: relative;
9.     text-align: center;
10.     box-shadow: 1px 1px 2px #e6e6e6;
11.     cursor: default;
12.     background: #fff url(../images/bgimg.jpg) no-repeat center center
13. }
14. .view .mask, .view .content {
15.     width: 300px;
16.     height: 200px;
17.     position: absolute;
18.     overflow: hidden;
19.     top: 0;
20.     left: 0
21. }
22. .view img {
23.     display: block;
24.     position: relative
25. }
26. .view h2 {
27.     text-transform: uppercase;
28.     color: #fff;
29.     text-align: center;
30.     position: relative;
31.     font-size: 17px;
32.     padding: 10px;
33.     background: rgba(0, 0, 0, 0.8);
34.     margin: 20px 0 0 0
35. }
36. .view p {
37.     font-family: Georgia, serif;
38.     font-style: italic;
39.     font-size: 12px;
40.     position: relative;
41.     color: #fff;
42.     padding: 10px 20px 20px;
43.     text-align: center
44. }
45. .view a.info {
46.     display: inline-block;
47.     text-decoration: none;
48.     padding: 7px 14px;
49.     background: #000;
50.     color: #fff;
51.     text-transform: uppercase;
52.     box-shadow: 0 0 1px #000
53. }
54. .view a.info:hover {
55.     box-shadow: 0 0 5px #000
56. }
57. .view-first img {
58.     transition: all 0.2s linear;
59. }
60. .view-first .mask {
61.     opacity: 0;
62.     background-color: rgba(219,127,8, 0.7);
63.     transition: all 0.4s ease-in-out;
64. }
65. .view-first h2 {
66.     transform: translateY(-100px);
67.     opacity: 0;
68.     transition: all 0.2s ease-in-out;
69. }
70. .view-first p {
71.     transform: translateY(100px);
72.     opacity: 0;
73.     transition: all 0.2s linear;
74. }
75. .view-first a.info{
76.     opacity: 0;
77.     transition: all 0.2s ease-in-out;
78. }
79. .view-first:hover img {
80.     transform: scale(1.1);
81. }
82. .view-first:hover .mask {
83.     opacity: 1;
84. }
85. .view-first:hover h2,
86. .view-first:hover p,
87. .view-first:hover a.info {
88.     opacity: 1;
89.     transform: translateY(0px);
90. }
91. .view-first:hover p {
92.     transition-delay: 0.1s;
93. }
94. .view-first:hover a.info {
95.     transition-delay: 0.2s;
96. }

3. Jetzt komme ich zu dem html Code. Diesen Code kopiere ich in ein Textfeld.

Code: HTML5

1.     <div class="main">
2.                     <div class="view view-first">
3.                         <img src="images/1.jpg">
4.                         <div class="mask">
5.                             <h2>Hover Style #1</h2>
6.                             <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
7.                             <a href="#" class="info">Read More</a>
8.                         </div>
9.                     </div>  
10.                     <div class="view view-first">
11.                         <img src="images/2.jpg">
12.                         <div class="mask">
13.                             <h2>Hover Style #1</h2>
14.                             <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
15.                             <a href="#" class="info">Read More</a>
16.                         </div>
17.                     </div>  
18.                     <div class="view view-first">
19.                         <img src="images/3.jpg">
20.                         <div class="mask">
21.                             <h2>Hover Style #1</h2>
22.                             <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
23.                             <a href="#" class="info">Read More</a>
24.                         </div>
25.                     </div>  
26.                     <div class="view view-first">
27.                         <img src="images/4.jpg">
28.                         <div class="mask">
29.                             <h2>Hover Style #1</h2>
30.                             <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
31.                             <a href="#" class="info">Read More</a>
32.                         </div>
33.                     </div>  
34.                 </div>
35.  
36.  

Hat das Eichhörnchen eine Chance, oder sollte es die Finger davon lassen?

Beste Grüße

[nettesekel]

Nach dem, was ich von dir so kenne und soweit ich es einschätzen kann, beißt du dich da durch. Ich denke, du kannst das schaffen.
Stell deinen aktuellen Versuch mit allem was du da jetzt beschrieben hast bitte nochmal online... wenn ich in den QT gucken kann ist es einfacher die Probleme oder deren Ursachen herauszufinden.