Text überlappt mit zu viel Text auf Hover

-3

Ich habe ein paar Dinge ausprobiert, aber scheinen nirgends zu bekommen, kann ich den Text verschieben, indem Sie die Position ändern, aber dies scheint zu dem Text irgendwie verschwinden in die Boxen führen Rand und merkwürdig distanziert. Ich vermute, dass ich das oben programmiert habe, das ist gut bei weniger Text, aber wenn ich zu viel hinzufüge, bekomme ich eine Überlappung ... trotzdem kann ich die Dinge um einen Tick verschieben, so dass sie gut aussehen.Text überlappt mit zu viel Text auf Hover

Website; http://outside.hobhob.uk Dies bezieht sich auf den Text, der angezeigt wird, wenn Sie den Mauszeiger über die Portfolioelemente im Raster bewegen. Ich brauche den Titel, um oben zu bleiben, aber vermeide die darunter liegende Beschreibung mit der Überschrift.

Code-Schnipsel des Gitterabschnitts;

CSS Ich schaue .. vielleicht ist das, wo ich falsch liege?

.buttons.blog-style p, 
.magnifier p, 
#gallery .caption p { 
    background-color: transparent; 
    border-color: rgb(0, 0, 0); 
    border-style: none; 
    border-width: 0; 
    font-weight: 500; 
    bottom: 20px; 
    color: rgb(0, 0, 0); 
    font-family: "Raleway"; 
    font-size: 16px !important; 
    left: 30px; 
    line-height: 28px; 
    position: relative; 
    text-decoration: none; 
    text-transform: none !important; 
    text-shadow: none; 
} 
.buttons.blog-style h4, 
.magnifier h4, 
#gallery .caption h3 { 
font-size:28px !important; 
line-height:28px; 
font-family:"HighVoltage" !important; 
display: inline-block; 
color: rgb(0, 0, 0); 
position:absolute; 
left:30px; 
bottom:60px; 
text-decoration:none; 
text-transform: none !important; 
background-color:transparent; 
text-shadow:none; 
border-width:0px; 
border-color:rgb(0, 0, 0); 
border-style:none; 

}

Quelle

2016-07-07 Daniel Hobbs

Nicht reproduzierbar, oder bin ich etwas anderes (http://imgur.com/2gppZKL)? –

Fragen, die Debugging-Hilfe suchen ("** warum funktioniert dieser Code nicht? **") müssen das gewünschte Verhalten, ein * spezifisches Problem oder Fehler * und * den kürzesten erforderlichen Code * enthalten, um es in der Frage selbst zu reproduzieren **. Fragen ohne ** eine klare Problemstellung ** sind für andere Leser nicht nützlich. Siehe: [Erstellen eines minimalen, vollständigen und überprüfbaren Beispiels] (http://stackoverflow.com/help/mcve). –

Auf welchen Text beziehen Sie sich? Das ist sehr vage für mich. Können Sie einen Codepen erstellen, der das Problem reproduziert und auf bestimmte Punkte hinweist? – MassDebates

Ich denke, man die h4 wollen immer sein auf dem Boden des .button und wenn ich richtig verstanden wollen Sie so etwas wie dieses:

jsfiddle

, wenn ein Element absolute Position hat und Sie möchten nicht, dass es sich mit anderen Elementen überschneidet. Sie müssen einen Platz für dieses Element erstellen.

müssen Sie diese CSS hinzufügen, um

.buttons { 
    position:relative 
} 
.buttons.blog-style p, 
.magnifier p, 
#gallery .caption p { 
    padding-bottom:88px; 
} 
.buttons.blog-style h4, 
.magnifier h4, 
#gallery .caption h3 { 
    margin:0; 
}

zu arbeiten, wo 88px eine Summe zwischen bottom:60px Sie auf der Beschreibung und der Höhe der Beschreibung line-height:28px;

i margin:0 auf der Beschreibung hinzugefügt weil es einfach nicht mehr nötig ist. aber wenn du diesen Rand behalten willst ... füge es dem padding-bottom:88px hinzu

Quelle

2016-07-07 12:49:57

Hey, Dies hilft, den Text zu überschneiden, aber führt dazu, dass der Titel über der Beschreibung ist. Ich habe auch immer noch das Problem des Textes verschwinden von der Kiste Rand auf einige der Boxen mit längeren Sätzen .. Dies ist eine große Hilfe obwohl mich, wo ich sein muss :) Danke –

Ah! Wenn ich es herausgefunden habe, habe ich hinzugefügt, was Sie erwähnt haben, aber den Abschnitt für Schaltflächen entfernt, um relativ zu sein, da ich diesen Code bereits in den anderen Abschnitten habe. Aber durch das Entfernen der linken Ränder wurde der Text nicht mehr verschwinden. :) Vielen Dank, Ihre Änderungen haben mir geholfen, das herauszufinden! –

Text überlappt mit zu viel Text auf Hover

Antwort

Verwandte Themen