Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Mouseovereffekt bei Galerien und Fotos

Begonnen von glory, 12. März 2014, 18:39:28

« vorheriges - nächstes »

glory

Da mir ja die Kenntnisse fehlen, frage ich einfach mal an, ob so etwas auch als Plugin bei mozilo möglich wäre:

http://www.bkh-of-marnies-passion.de/akt_wurf.html
oben ist ein einzelnes Bild und ein Stückchen weiter unten eine ganze Galerie zu sehen.

Liebe Grüße von glory
Wer aufhört zu lernen, hört auf zu leben!

HPdesigner

#1
Soweit ich das seh, ist das ein simpler CSS Hovereffekt - ein Plugin wäre dafür sicher etwas übertrieben. Das könntest du auch mit benutzerdefinierter Syntax realisieren - hier ein Beispiel für ein Bild aus der Dateiliste:

Syntaxelemente:hoverbild = <div class="hoverimages"><div class="small">[bild|{VALUE}]</div><div class="large">[bild|{VALUE}]</div></div>

CSS:.hoverimages .small img {
  display:block;
  width: 50px;
}

.hoverimages .large img {
  display:none;
  width: 200px;
}

.hoverimages:hover .small img {
  display:none;
}

.hoverimages:hover .large img {
  display:block;
}


Im Frontend:[hoverbild|@=deineKategorie:deineDatei=@]

Hab ich nicht getestet, vom Prinzip her sollte das aber so funktionieren. Falls es noch Probleme gibt, sag Bescheid, dann teste ich mal.

lg, HPdesigner
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

glory

Hallöchen!

Ganz vielen Dank für die superschnelle Hilfe!!! Ich freue mich, dass Mouseovereffekt auch mit mozilo möglich ist.
Doch 100%ig ist es noch nicht das gleiche wie bei der html-Seite. Bei der mozilo-Seite verschiebt sich alles auf der Seite (allerdings geht's auch wieder prima zurück) und bei der html-Seite öffnet sich das Bild in einer neuen Ebene.
Auch gelingt es mir nicht mehr, den Seiteninhalt zu zentrieren.
Hier habe ich den Hovereffekt bei dem Pinnzettel angelegt: http://www.kirsche.bplaced.net/Kitten/A-Wurf.html?draft=true

und beim B-Wurf habe ich den Effekt erst mal weggelassen, da ist alles prima zentriert : http://www.kirsche.bplaced.net/Kitten/B-Wurf.html?draft=true

Auf alle Fälle habe ich es aber dadurch, dass du alles so super beschrieben hast, gleich auf Anhieb hinbekommen. Ein Extradank noch mal dafür!

Viele Grüße!
Wer aufhört zu lernen, hört auf zu leben!

HPdesigner

Super dass es gleich geklappt hat. Ja, damit der Hovereffekt nicht alles verschiebt, müsste.large absolut positioniert und .small img nicht auf display:none; sondern auf visibility:hidden; gesetzt werden. Also kurz gesagt, man müsste nochn bissl am CSS rumschrauben - aber das sollte nicht der Aufwand sein. Falls du da noch Hilfe brauchst, sag Bescheid.

lg, HPdesigner
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

glory

Hallöchen!

Ich habe es so abgeändert:

.hoverimages .small img {
  display:block;
  width: 150px;
}

.hoverimages .large img {
  display:none;
  width: 432px;
}

.hoverimages: hover .small img {
  visibility: hidden;
}

.hoverimages:hover .large img {
  display:block;
  position: absolute;
}

Nun verschiebt sich zwar nichts mehr, aber das größere Bild ist zu weit unten. Kann mal da noch etwas dran ändern?
Hier noch mal der Link: http://www.kirsche.bplaced.net/Kitten/A-Wurf.html

Viele Grüße!
Wer aufhört zu lernen, hört auf zu leben!

stefanbe

vertausch large und small einfach
hoverbild = <div class="hoverimages"><div class="large">[bild|{VALUE}]</div><div class="small">[bild|{VALUE}]</div></div>

HPdesigner

Wenn du willst, dass es direkt darauf hovert, setz folgendes:

.hoverimages {
  position:relative;
}

.hoverimages .small img {
  display:block;
  width: 150px;
}

.hoverimages .large {
  position: absolute;
  top: -50%;
  left -50%;
}

.hoverimages .large img {
  display:none;
  width: 432px;
}

.hoverimages: hover .small img {
  visibility: hidden;
}

.hoverimages:hover .large img {
  display:block;
  position: absolute;
}


lg, HPdesigner
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

glory

Hallo Stefanbe,

als ich es in der Syntax austauschte, änderte sich nicht wirklich was.

HPdesigner:
Ich habe das nun auch in der css geändert und nun passt es, freu!!!

Bei Gelegenheit werde ich es dann auch mal bei der Galerie ausprobieren, für die Klickfaulen, grins.

Wieder etwas dazugelernt, freue mich ganz sehr! Ich danke euch!
Wer aufhört zu lernen, hört auf zu leben!