Zoom auf Box legen

[admin]

basti1012   Ich habe das selbst herausgefunden was folgt: 

es braucht nur:

transform: scale(3.1);
z-index: 20;

im CSS ...  Schaue Dir bitte trotzdem das Ende von meiner folgenden Frage an ...


basti1012 kannst Du mir bitte zeigen, wie ich möglichst einfach den Inhalt von einer Box bei hover in einem pop-up Fenster vergrössert darstellen kann. Auf der jetzt vorhandenen Seite hat es Kästen die mit diesem Code erzeugt werden:

a#bx01 {
   color: black;
   background-color: RGB(48,216,97);
   position: absolute;
   width: 300px;
   height: 140px;
   top: 160px;
   left: 250px;
   text-align: left;
   transition: all 0.7s ease;
}
a#bx01:hover {
   background-color: green;
   color: black;
   transform: scale(1.1);
   transition: all 0.7s ease;
}

HTML:

href="sl/index.html"; target="_parent">
02

 

Es hat 20 Boxen in 5 Linien und 4 Spalten. Bei hover sollte der Inhalt von der Box, die man mit der Maus berührt sich einfach auf (fast) die komplette Seitengröße aufblähen. Wenn man dan mit der Maus aus dem Bild fährt schliesst sich das Pop-Up wieder von selbst.

Bitte überlege ob das nicht ganz extrem einfach zu realisieren ist ... die Kästen werden schon jetzt bei Mouse-over grösser (allerdings schieben sie sich unter den nächsten Kasten) ... wenn man sie auf ca 4 x die ursprüngliche Größe vergrößern könnte und über den daneben stehenden Kästen, wäre das schon ganz toll.

Und noch etwas: ich würde gerne Dein Forum, als Forum von einer von meinen Seiten nutzen (das ginge mit einem einfachen Link). Das bringt Dir dann Nutzer und mir erspart es, dass ich ein eigenes Forum aufbauen muss ... aber um das abzumachen, müsstest Du mich bitte per mail anschreiben.

Danke,
brainstuff

[admin]

du kannst mir ja PN schicken hier. Aber ich versuche mal gerade da was zu bauen

[admin]

Ja, Scheiß die Wand an . Ich dachte, das wäre einfacher. Das Problem ist bei scale, dass er ja größer wird, aber sich über den Bildschirm hinweg rauszoomt. Dann ist dein hover auf der ganzen breite auch doof. Weil wenn du hoverst und dabei der div so groß wie der Bildschirm werden soll, kannst du ja nicht mehr raus aus den Container . Dazu müstest du mit der Maus aus den Browser Fenster raus, damit der hover Effekt zurückgeht. Ich muss mal weiter versuchen. Mit Click auf den Kasten geht es ja schon fast ,aber auch noch nicht gut .
**Link entfernt, weil Seite nicht mehr erreichbar **

[admin]

@basti1012 meine jetzige Version ist fast perfekt. Aber ich bekomme keine Text-Hintergrund Farbe hin ... der TExt (im folgenden Beispiel "03") kommt in schwarz auf transparentem Hintergrund ... und ist dann je nach Hintergrund nicht sichtbar. Wie bekomme ich den auf einen weissen hintergrund?

a#bx08 {
color: black;
background-color: RGB(48,216,97);
position: absolute;
width: 300px;
height: 140px;
top: 305px;
left: 1165px;
text-align: left;
transition: all 0.7s ease;
}
a#bx08:hover {
background-color: green;
color: black;
transform: scale(2.1);
z-index: 20;
transition: all 0.7s ease;
}

href="sl/index.html"; target="_parent">

08

Danke,
Brainstuff

[admin]

Wolltest du beim Zoomen nicht volle Größe haben . Zb so.  Habe da noch mal etwas nachgedacht und so könnte man es auch machen.  Was soll den gezoomt werden Bilder oder Schrift ??   Weil  Bilder ist einfacher als diese Scheiß Schrift wie jetzt
https://basti1012.bplaced.net/index.php?...hilfeforum&name=Zoom_auf_Box_legen_2

[admin]

Oder meinst du das so ungefähr mit deiner Schrift und Farbe
DEMO