mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 25.04.2024 07:18 Benutzername: Passwort: Auto-Login

Thema: rollover-PNG in PS vom 05.12.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Software - Nonprint -> rollover-PNG in PS
Autor Nachricht
nikita09
Threadersteller

Dabei seit: 05.12.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 05.12.2012 16:25
Titel

rollover-PNG in PS

 Antworten mit Zitat Zum Seitenanfang
hallo,

ich möchte gerne für eine homepage ein rollover-bild machen.
und zwar ist es einmal das normale foto und dann wenn man mit der maus drüberfährt soll das foto heller werden und es soll schrift erscheinen.
wie kann ich das mit PS in einer PNG-datei machen?

danke für eure hilfe.
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Mi 05.12.2012 16:48
Titel

Antworten mit Zitat Zum Seitenanfang
Mach das am besten mit CSS und Sprites. Siehe z.B. http://www.webkrauts.de/artikel/2007/hovereffekte-mit-css-sprites

Wenn du eine mehrstufige Animation brauchst, kannst Du leider nicht auf Sprites zurückgreifen sondern musst die Bilder komplett tauschen in der :hover Pseudoklasse.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Doc Maik

Dabei seit: 29.10.2008
Ort: Viersen
Alter: 54
Geschlecht: Männlich
Verfasst Do 13.12.2012 13:08
Titel

Antworten mit Zitat Zum Seitenanfang
Es gibt m. W. kein Grafikformat, das einen Hovereffekt mit der Maus verbinden kann. Man ist also auf zwei Bilder und HTML/Javascript angewiesen. Photoshop, zusammen mit ImageReady kann dir das erstellen. Den erzeugten Code und die Bilder bettest du dann in deine Webseite ein.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Morgo

Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht: Männlich
Verfasst Fr 14.12.2012 14:27
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
<div class="superduperimg"><img src="superduperimgeffect.jpg" /><p>Text</p></div>


Code:

.superduperimg {
  background: #000;
}

.superduperimg img {
   opacity: 0.5;
   -moz-transition: .5s all;
   -webkit-transition: .5s all;
   transition: .5s all;
}

.superduperimg p {
    display: none;
}

.superduperimg:hover p {
    display: block;
}

.superduperimg:hover img {
   opacity: 1;
}


np, gern
  View user's profile Private Nachricht senden
 
Ähnliche Themen Rollover
Rollover mit CSS
rollover
Rollover in ImageReady 8.0
Rollover Problem
CSS, Hilfe bei Rollover
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Software - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB