CSS3: Text zentrieren (Inhalt) in div: vor

Question

Ich habe einen Code geschrieben, um einen Layover mit etwas Text zu erstellen. Jetzt habe ich zwei Probleme:

1) Ich möchte den Text zentrieren. 2) Ich möchte den Zwischenstopp zu einem Link machen.

Da ich ein CSS-Neuling bin, hoffe ich, dass Sie mir einen Rat geben können!

Mit freundlichen Grüßen!

.hover_div { 
 
    position:relative; 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.hover_div img { 
 
    width:100%; 
 
    vertical-align:top; 
 
} 
 
.hover_div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width:100%; height: 100%; 
 
    top: 0; left: 0; 
 
    background:rgba(0,0,0,0.6); 
 
    opacity:0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
} 
 

 
.hover_div:before { 
 
    content: attr(data-content); 
 
    color:#fff; 
 
    position:absolute; 
 
    opacity:0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    z-index: 1; 
 
} 
 
.hover_div:hover:after { 
 
    opacity:1; 
 
} 
 

 
.hover_div:hover:before { 
 
    opacity:1; 
 
}

<div data-content="Elektro" class="hover_div"> 
 
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /> 
 
</div>

Answer 1

Ich habe den Code in das folgende JSFiddle aktualisiert: https://jsfiddle.net/rvxo7fn5/

Ich habe die folgenden Zeilen an dem :before hinzugefügt:

text-align:center; 
width: 100%; 
margin-top:50%; 
transform: translateY(-50%); 

Grundsätzlich zentriert text-align: center; natürlich den Text horizontal. Eine absolute positionierte div hat jedoch keine Breite, weshalb ich die width: 100% hinzugefügt habe. Als nächstes müssen Sie es vertikal zentrieren. Die margin-top: 50%; verschiebt die div 50% der Höhe des übergeordneten div. transform: translateY(-50%) verschiebt das Div 50% der Höhe des Div selbst zurück. Dadurch wird es in der Mitte des übergeordneten Elements ausgerichtet. (50% der Elternhöhe - 50% der Kinderzahl).

Sie haben auch erwähnt, dass es ein Link sein soll. Dies kann erreicht werden, indem einfach die <div> durch eine <a> ersetzt und display: block; zu Ihrer .hover_div Klasse hinzugefügt wird. Dies gibt ihm die Eigenschaften, die ein div auch haben würde.

Hoffe, dass hilft!

Answer 2

Aktualisieren der : schweben wie unten Stil.

.hover_div:hover:before 
{ 
    opacity:1; 
    width:100%; 
    text-align:center; 
    text-decoration:underline; 
    cursor:pointer; 
} 

Answer 3

Sie können es durch das Ersetzen <div> mit <a> machen verknüpfen.

.hover_div { 
 
    position:relative; 
 
    display: block; 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.hover_div img { 
 
    width:100%; 
 
    vertical-align:top; 
 
} 
 
.hover_div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width:100%; height: 100%; 
 
    top: 0; left: 0; 
 
    background:rgba(0,0,0,0.6); 
 
    opacity:0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
} 
 

 
.hover_div:before { 
 
    content: attr(data-content); 
 
    color:#fff; 
 
    position:absolute; 
 
    text-align: center; 
 
    opacity:0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    transform: translateY(-50%); 
 
    z-index: 1; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 50%; 
 
} 
 
.hover_div:hover:after { 
 
    opacity:1; 
 
} 
 

 
.hover_div:hover:before { 
 
    opacity:1; 
 
}

<a href="#" data-content="Elektro" class="hover_div"> 
 
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /> 
 
</a>

Answer 4

Der Text kann durch left: 50%; top: 50%; transform: translate(-50%, -50%) Zugabe zentriert werden.

Pseudo-Elemente wie: nach und: Vorher kann nicht vom DOM aus zugegriffen werden. Es kann also kein Link daraus gemacht werden.

.hover_div { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.hover_div img { 
 
    width: 100%; 
 
    vertical-align: top; 
 
} 
 
.hover_div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.6); 
 
    opacity: 0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
} 
 
.hover_div:before { 
 
    content: attr(data-content); 
 
    color: #fff; 
 
    position: absolute; 
 
    opacity: 0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    z-index: 1; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.hover_div:hover:after { 
 
    opacity: 1; 
 
} 
 
.hover_div:hover:before { 
 
    opacity: 1; 
 
}

<div data-content="Elektro" class="hover_div"> 
 
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /> 
 
</div>

Answer 5

.hover_div { 
 
    position:relative; 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.hover_div img { 
 
    width:100%; 
 
    vertical-align:top; 
 
} 
 
.hover_div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width:100%; height: 100%; 
 
    top: 0; left: 0; 
 
    background:rgba(0,0,0,0.6); 
 
    opacity:0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    
 
} 
 

 
.hover_div:before { 
 
    content: attr(data-content); 
 
    color:#fff; 
 
    position:absolute; 
 
    opacity:0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    z-index: 1; 
 
    text-align:center; 
 
    height:100%; 
 
    width:100%; 
 
    padding-top:50%; 
 
} 
 
.hover_div:hover:after { 
 
    opacity:1; 
 
} 
 

 
.hover_div:hover:before { 
 
    opacity:1; 
 
}

<div data-content="Elektro" class="hover_div"> 
 
    <a href="link here"><img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /></a> 
 
</div>