Transparente Ebene über img wenn Hover ++ Text

Ich möchte eine transparente Ebene über meinem IMG auf einer Karte hinzufügen, wenn ich darüber schweben, habe ich diesen Teil gemacht, aber ich möchte es auf den IMG geschnitten werden und nicht zu decken Fußzeile auf der Karte. Wenn das Sinn macht?Transparente Ebene über img wenn Hover ++ Text

Dies ist die Karte mit Hover. Wie u auf der Karte sehen können, nur das img wie 90% der Karte abdeckt, möchte ich die Hover-Overlay das gleiche

Card when not hover IMG Card when hover IMG

.card { 
    position:relative; 
    width: 350px; 
    height: 335px; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-color: #fff; 
    border-radius: 5px; 
    margin: 30px; 
    float: left; 
    } 

    #card_oslo{ 
    background-image: url(img/oslo.jpg); 
    } 
    #card_oslo:hover{ 
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7); 
    transition: .5s; 
    }

Quelle

2016-10-31 Anders Lund

Ich möchte auch Text bekommen, um Appere, wenn ich über die Karte bewegen, das ist der Punkt der dunklen Transparenz Schicht. Irgendwelche Vorschläge, wie man das macht? thx –

Wir müssen das Markup auch sehen, so können wir einen guten Ansatz vorschlagen – LGSon

Sie das Overlay auf

kann zu tun

position: absolute; 
top: 0; 
bottom: XXpx; 
left: 0; 
right: 0;

wo XX ist die Fußhöhe, dann wird es die gesamte Karte abdecken und die unteren x Pixel frei lassen. Sie können auch% -Werte anstelle von px verwenden.

Wenn das Overlay Text enthalten soll, müssen Sie es in ein extra Div einfügen, das Sie dann als Overlay verwenden können.

Ich habe eine vereinfachte Version hier https://jsfiddle.net/0L9fL1pj/

Quelle

2016-10-31 22:18:13 deadfishli

Lesen Sie die Frage erneut – LGSon

yeah Ich habe gerade festgestellt, dass er nicht was er will – deadfishli

Geben Sie die Überlagerungsbreite 350, Höhe 335 und Rand Radius 5px . Dann wird es die gleiche Größe wie das Bild haben. Dann können Sie es absolut positionieren und es sollte an der richtigen Stelle sein. –

Sie einen pseudo-element dafür verwenden soll. Verwenden Sie :after oder :before und stellen Sie es als volle Größe auch setzen Sie das übergeordnete mit position:relative; dann ändern Sie die opacity des Pseudo-Elements auf .

Arbeiten Demo.

.box { 
 
    position:relative; 
 
} 
 
.box:after { 
 
    content:""; 
 
    /* Set the element as full-size */ 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    width:100%; 
 
    height:100%; 
 
    /* Set bg and hide the element + animation */ 
 
    background-color:#000; 
 
    opacity:0; 
 
    transition: all 0.5s ease 0s; 
 
} 
 
.box:hover:after { 
 
    /* Show the overlay on hover */ 
 
    opacity:0.5; 
 
} 
 

 
/* For the demo */ 
 
.box { 
 
    width:200px; 
 
    height:200px; 
 
    background-color:red; 
 
}

<div class="box"></div>

Quelle

2016-10-31 22:21:51 paolobasso

Transparente Ebene über img wenn Hover ++ Text

Antwort

Verwandte Themen