• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Kreis über Kreis

D

Dsimon24

Mitglied
Guten Morgen,

ich habe ein Fenster, mit einem Bild.
Wenn ich die Mouse über das Fenster halte, dann vergrößert sich das Fenster und es
erscheinen Kreise, welche als Buttons dienen, die sich ebenfalls ein wenig vergrößern.

Siehe HTML-Code:
HTML: 
<div class="row">
    <div class="col-md-3">
        <div class="elternelement1 flex-container zoom">
        <a class="kreis div-text noDesign" href="#" class="noDesign">...</a>
        <a class="kreis div-text noDesign" href="#" class="noDesign">...</a>
        <a class="kreis div-text noDesign" href="#" class="noDesign">...</a>
        <a class="kreis div-text noDesign" href="#" class="noDesign">...</a>
        </div>
    </div>   
</div>

Siehe CSS-Code:
Code: 
/* --- Bereich: Container der Bilder --- */

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
        position: absolute;
     padding: 10px;  
    height: 175px;
     width: 260px;
}

.elternelement1 {
    background-image: url("../img/1.jpg");
}


/* --- Bereich: Kreiselemente --- */

.kreis {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-image:linear-gradient(90deg, #ff0000 0%, #e00000 100%);
    position: relative;
    opacity: 0;
    margin: auto;
}

.data-kreis {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-image:linear-gradient(90deg, #ff0000 0%, #e00000 100%);
    -webkit-justify-content: initial;
    justify-content: initial;
    position: relative;
    margin: auto;
    z-index: 100;
    opacity: 0;
   
}


/* --- Bereich: Verhalten --- */

.zoom {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
 -o-transition: transform 0.8s;
}
.zoom ~ .kreis {
   
}

.zoom:hover {
 cursor: zoom-in; 
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(1.65, 1.65);
 -moz-transform: scale(1.65, 1.65);
 -webkit-transform: scale(1.65, 1.65);
 -ms-transform: scale(1.65, 1.65);
 -o-transform: scale(1.65, 1.65);
 z-index:10;
}

.zoom:hover > .kreis {
    opacity: 0.8;
}

.div-text {
    text-align: center;
    margin-left: 3px;
    margin-top: auto; 
    font-size: 9px;
}

a.noDesign {
    text-decoration: none;
    color: #FFFFFF;
}

Jetzt möchte ich kleinere Kreise so halb in den großen Kreisen einpflegen. So ähnlich
wie beim iPhone die kleinen, roten Kreise, wenn neue Nachrichten vorhanden sind.

Bei der Klasse 'data-kreis', handelt es sich um den neuen Kreis.

Wie kann ich dies realisieren?

VG, David
 
Werbung:
Dsimon24 schrieb:
Jetzt möchte ich kleinere Kreise so halb in den großen Kreisen einpflegen.
Zum Vergrößern anklicken....
Dauerhaft oder temporär, z.B. beim Überfahren der Links?
Dsimon24 schrieb:
Bei der Klasse 'data-kreis', handelt es sich um den neuen Kreis.
Zum Vergrößern anklicken....
Wie auch immer das Wunschergebnis nun im Detail ausfallen soll, anstatt der Klasse .data-kreis findet hier das Pseudoelement ::after seine Verwendung.

.kreis::after oder z.B. .kreis:hover::after mit den zusätzlich benötigten CSS-Regeln display:block; content:""; ausstatten.

Und zuletzt nicht vergessen, einen kontrastreiche(re)n Hintergrund gegenüber dem äußeren Kreis zu definieren, damit er zum Vorschein kommt :cool:
 
Also es soll dauerhaft eingeblendet werden, wenn ich über das Bild fahre.
Dann werden auch erst die Kreise mit den Links eingeblendet und dann
sollen die weiteren Kreise ebenfalls erscheinen.

Ich habe den CSS-Code nun wie folgt abgeändert, allerdings erscheinen
noch keine weiteren Kreise:

Code: 
/* --- Bereich: Container der Bilder --- */

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
        position: absolute;
      padding: 10px; 
    height: 175px;
      width: 260px;
}

.elternelement1 {
    background-image: url("../img/1.jpg");
}
.elternelement2 {
    background-image: url("../img/2.jpg");
}
.elternelement3 {
    background-image: url("../img/3.jpg");
}
.elternelement4 {
    background-image: url("../img/4.jpg");
}


/* --- Bereich: Kreiselemente --- */

.kreis {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-image:linear-gradient(90deg, #ff0000 0%, #e00000 100%);
    position: relative;
    opacity: 0;
    margin: auto;
}

.kreis::after {
    width: 70px;
    height: 70px;
    border-radius: 70px;
    background-image:linear-gradient(90deg, #ff0000 0%, #e00000 100%);
    -webkit-justify-content: initial;
    justify-content: initial;
    position: relative;
    margin: auto;
    z-index: 100;
    opacity: 0.8;
   
}


/* --- Bereich: Verhalten --- */

.zoom {
transition: transform 0.8s;
-moz-transition: transform 0.8s;
-webkit-transition: transform 0.8s;
-ms-transition: transform 0.8s;
-o-transition: transform 0.8s;
}
.zoom ~ .kreis {
   
}

.zoom:hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(1.65, 1.65);
-moz-transform: scale(1.65, 1.65);
-webkit-transform: scale(1.65, 1.65);
-ms-transform: scale(1.65, 1.65);
-o-transform: scale(1.65, 1.65);
z-index:10;
}

.zoom:hover > .kreis {
    opacity: 0.8;
}

.zoom:hover > .data-kreis {
    opacity: 0.8;
}




.div-text {
    text-align: center;
    margin-left: 3px;
    margin-top: auto;
    font-size: 9px;
}

a.noDesign {
    text-decoration: none;
    color: #FFFFFF;
}
 
Werbung:
Dsimon24 schrieb:
Ich habe den CSS-Code nun wie folgt abgeändert, allerdings erscheinen
noch keine weiteren Kreise
Zum Vergrößern anklicken....
Die Änderungen für das Pseudoelement ::after sind auch nicht vollständig vorgenommen werden, obwohl ich explizit darauf hingewiesen hatte, dass in Deinem bisherigen CSS für dieses Pseudoelement (ehemals .data-kreis) noch zwei weitere CSS-Eigenschaften erforderlich sind.
Spicelab schrieb:
.kreis::after oder z.B. .kreis:hover::after mit den zusätzlich benötigten CSS-Regeln display:block; content:""; ausstatten.

Und zuletzt nicht vergessen, einen kontrastreiche(re)n Hintergrund gegenüber dem äußeren Kreis zu definieren, damit er zum Vorschein kommt :cool:
Zum Vergrößern anklicken....
 
Sorry, hab gestern wohl zu lange gearbeitet, bin noch neben der Spur :-(

Kann ich statt eines festen content-Wertes jetzt auch einen Wert aus
einer PHP-Variable einbinden? Dann muss ich doch eigentlich den
'content' in HTML auslagern, oder?
 
Dsimon24 schrieb:
Kann ich statt eines festen content-Wertes jetzt auch einen Wert aus
einer PHP-Variable einbinden? Dann muss ich doch eigentlich den
'content' in HTML auslagern, oder?
Zum Vergrößern anklicken....
Im CSS ist derzeit überhaupt kein Inhalt für content vorgesehen - muß er auch nicht zwangsweise. Hauptsache content:""; taucht im Regelblock des ::after-Pseudoelements auf.

Wenn Du PHP-Variablen in content:""; anstatt direkt in den <a>-Tags ausgeben willst, bedenke, dass Du bei den eingangs gezeigten 4 Links auch entsprechend 4 separate Pseudoelemente benötigst, was das CSS unnötig aufbläht.
 
Werbung:
Wie kann ich es denn dann ohne unnötiges Aufblähen des CSS-Codes
realisieren, variable Zahlen im kleineren Kreis ausgeben zu lassen?
Die Zahlen befinden sich derzeit in einer PHP-Variable.
 
Dsimon24 schrieb:
Wie kann ich es denn dann ohne unnötiges Aufblähen des CSS-Codes
realisieren, variable Zahlen im kleineren Kreis ausgeben zu lassen?
Zum Vergrößern anklicken....
Von welchem der kleineren Kreise sprichst Du jetzt?

width/height:20px aus dem ersten Quellcode (= Pseudoelement ::after), oder width/height:50px aus dem heutigen Quellcode (= <a class="kreis"></a>)?

Wenn es nicht ausreichend ist, die PHP-Variablen direkt im HTML-Code in <a>...</a> auszugeben, mußt Du halt das CSS entsprechend erweitern.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben