Porträt
Porträt
Hier meine CSS um das Bild zu vergrößern und einen Schlagschatten (box-shadow) hinzuzufügen. Die class="myimage" gehört dann in das <img> Tag für das Bild, also z.B. so:
<img class="myimage" src="file:///C:/Users/User/Tutorials-2/assets/images/girl.jpg" alt="Girl">
dabei steht in die Anweisung "transition" die Zeit der Animation von 0,5 Sekunden und in der Anweisung "transform" die Größe.
.myimage {
transition: all 0.5s linear;
}
.myimage:hover {
box-shadow: 25px 25px 25px rgba(0, 0, 0, 0.4);
transform: scale(1.05);
cursor: pointer;
}
Zum Einbau vom Sound habe ich ein JavaScript von javascriptkit.com verwendet und hier eingebaut.
Das JavaScript unten gehört in den Bereich "Inside <head> code" der Seiteneinstellungen.
Ich habe hier zwei Sound-Dateien verwendet, eine Datei "pop.mp3" für Mausüber und eine Datei "interface.mp3" für Klick. Ihr könnt natürlich jeweils eine der Variablen (ganz unten im Script) auch löschen, wenn ihr nur einen Sound haben wollt. Die Sound-Dateien müsst ihr natürlich händisch in das Verzeichnis der lokalen Publizierung und an den Server kopieren. Ich habe hier die ein Verzeichnis "sound" angelegt und die Dateien in dieses Verzeichnis kopiert, dann also mit dieser relativen Pfadangabe:
./sound/pop.mp3
<!-- Script für Sound -->
<script>
// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound
var html5_audiotypes={ //define list of audio file extensions and their audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}
// Initialize your sound clips, you may use 1 fallback file each:
var mouseoversound=createsoundbite("./sound/pop.mp3")
var clicksound=createsoundbite("./sound/interface.mp3")
</script>
Hier könnt ihr mit der rechten Maustaste diese beiden Sound-Dateien von Pixabay downloaden. Im Kontext-Menü "speichern unter" wählen:
interface.mp3 und pop.mp3
Auf der Seite von Pixabay findet ihr sehr viele, kostenlose Sound-Dateien:
Sound Effekte
Für den Aufruf vom JavaScript oben, schreibt man dann entweder beide oder einen Aufruf an das Element:
Für Mausüber:
onmouseover="mouseoversound.playclip()"
Für Klick:
onclick="clicksound.playclip()"
<div class="image-wrapper" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">
<img class="myimage" src="file:///C:/Users/User/Tutorials-2/assets/images/girl.jpg" alt="Girl">
</div>
Natürlich kann man jeden möglichen Sound oder auch Musik nicht nur an Bildern anbringen sondern überall, wie zum Beispiel an Textlinks oder Buttons oder auch an einer Navigation.
Viel Erfolg beim Nachbau.