Wie erstelle ich dieses transparente overlay-Bild auf hover mit CSS?

Ich bin auf der Suche nach Beratung zu reproduzieren (siehe dieses Bild) Effekt für mein Bild schwebt. Mein problem ist, dass meine Bilder sind flüssig, und ich habe nicht wirklich in der Lage zu finden, eine gute tutorials über dieses Thema, kombiniert mit overlays.

Ich bin angenommen, ich habe ein transparentes png (weiß-Bereich + Kreis), die überlagert das Bild auf hover und dann den text überlagern? Und das alles braucht, um die Größe entsprechend mit dem Bild selbst.
Auch die Obere Grenze ist nicht Teil des Bildes, es ist mit CSS erzeugt, und ich will nicht, dass zu überlagert werden, wenn möglich.

Könnte jemand freundlicherweise zeigen Sie mich in die richtige Richtung, oder Ratschläge geben, wenn es eine bessere Umsetzung? Ich bin eher verloren.

Vielen Dank im Voraus. 🙂

Kannst du eine Geige( jsfiddle.net ) mit dem code, dass Sie versucht haben
w3schools.com/css/css_image_transparency.asp ,impressivewebs.com/...
Meinst du so etwas? jsfiddle.net/YFJh7 - PS: eine. Ändern Sie die Bilder, b. Ich nicht selber die Bilder.
Dieser wat u wollen, hoffe ich..jsfiddle.net/yUbV9/3

InformationsquelleAutor Lin | 2014-01-17

  1. 8

    Wenn das Bild wird in einem div-Container mit einer definierten Breite, können Sie eine absolut positionierte div mit div, die werden so tun, als overlay.
    Vorausgesetzt, das snippet und die Deckkraft der überlagerung auf null gesetzt ist

    <div class="picholder">
    <img class="fancypics" src=http://placehold.it/500x650></img>
    <div class="overlay"><p class="text_box">Hello World!</p></div>
</div>

    css für den hover-Effekt wäre

    .picholder:hover .overlay{opacity:1;}
.picholder:hover .fancypics{opacity:0.7;}

    Dies sollte den hover-Effekt, ich glaube, du wirst für. Die folgenden css-sollte-center-overlay und einige andere Sachen. sehen hier mehr zum zentrieren von divs vertikal und horizontal

    .overlay {
  bottom: 0;left: 0; top: 0; right: 0;
  height: 150px;
  width: 150px;
  margin: auto;
  position: absolute;
  background-color:#3f3f3f;
  border-radius: 50%;
  opacity:0;
}
.fancypics{width:100%;}
.text_box{
  color:white;
  weight:bold;
  font-size:2em;
  padding:10px;
  padding-bottom:50%;
  text-align:center;
}

    und natürlich die fiddle

    Danke, das war genau was ich brauchte! Ich änderte es ein bisschen auf meine Bedürfnisse anzupassen und es Super geklappt. 🙂

    InformationsquelleAutor Olumide

  2. 2

    Verwenden Sie einfach die hintergrund-Farbe festlegen, eine transparente Farbe:

    Demo hier

    Wie erstelle ich dieses transparente overlay-Bild auf hover mit CSS?

    HTML

    <div class="overlay">
    <div>Hello</div>
    <span>January 16. 2014</span>
</div>

    CSS

    .overlay {
    position:relative;
    width:200px;
    height:200px;
    border-radius:50%;
}
.overlay:hover {
    background:rgba(0,0,0,0.5);
}
.overlay > div {
    position:absolute;
    color:#fff;
    font:50px sans-serif;
    width:100%;
    top:33%;
    text-align:center;
}
.overlay > span {
    position:absolute;
    color:#fff;
    font:12px sans-serif;
    width:100%;
    top:67%;
    text-align:center;
}

    Die gestrichelte Linie an der Grenze des oberen text kann erreicht werden, entweder mit einem border-bottom-oder single-line-Bild, das Sie Anhängen, als hintergrund des div.

    Hoffe, das hilft.

    InformationsquelleAutor

Schreibe einen Kommentar