CSS - Hintergrundbild mit Zoom Funktion

Lorem Ipsum

<style>

.
image1 {
 
width200px;
 
height200px;
 
backgroundurl("bild.jpg");
 
background-size100100%;
 
background-positionCenter Center;
 
transitionall 3s;
}

.
button {
 
width200px;
 
height200px;
 
positionAbsolute;
 
font-size1rem;
 
color#FFFFFF;
 
text-alignCenter;
 
line-height200px;
 
cursor: Default;
}

.
button:hover ~ .image1 {
 
background-size150150%;
}
</
style>

<
div>
 <
div class="button">Lorem Ipsum</div>
 <
div class="image1"></div>
</
div>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<abbr> Abkürzung

CSS - Animierte Box mit Keyframes

PHP - Element aus einem Array löschen

JavaScript - Zeit-Differenz ermitteln

MySQL - Datenbank-Abfrage über den URL-Parameter

Grafiken mit Text
Suchmaschinen können mit Grafiken nichts anfangen, sie beachten stattdessen den alt-Text und ziehen diesen auch für das Ranking heran. Mit guten alt-Texten können Sie also auch Ihrer Position in den Suchmaschinen verbessern. Vergeben wird der alternative Text mit alt="Ihr Text"