CSS transparent Form über das Bild

Question

This is what i am trying to achive

ich habe:

#image1 { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    align-self: auto; 
 
    background-color: #dc022e; 
 
    width: 340px; 
 
    height: 100px; 
 
    border-radius: 50%/100%; 
 
    border-bottom-left-radius: 0; 
 
    /*transform: rotate(10deg);*/ 
 
    border-bottom-right-radius: 0; 
 
    opacity: 0.8; 
 
    } 
 
    
 
    #image2 img { 
 
    width: 80%; 
 
    }

<div> 
 
    <div id="image2"> 
 
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB"> 
 
    </div> 
 
    <div id="image1"></div> 
 
</div>

Schließlich weiß ich nicht, wie man es machen gedreht und mit den Rändern wie geschnitten im Bild

Answer 1

Ein schnelles Beispiel würde ein Pseudoelement verwenden und das Bild im Hintergrund setzen.

div { 
 
    position: relative; 
 
    height: 300px; 
 
    width: 500px; 
 
    background: url(http://lorempixel.com/500/300);/*image path*/ 
 
    overflow: hidden;/*hides the rest of the circle*/ 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    position: absolute; /*positions with reference to div*/ 
 
    top: 100%; 
 
    left: 50%; 
 
    width: 0;/*define value if you didn't want hover*/ 
 
    height: 0; 
 
    border-radius: 50%; 
 
    background: tomato;/*could be rgba value (you can remove opacity then)*/ 
 
    opacity: 0.5; 
 
    transform: translate(-50%, -50%);/*ensures it is in center of image*/ 
 
    transition: all 0.4s; 
 
} 
 

 

 
/*Demo Only*/ 
 
div:hover:before {/*place this in your pseudo declaration to remove the hover*/ 
 
    height: 100%; 
 
    width: 150%;/*this makes the shape wider than square*/ 
 
    transform: translate(-50%, -50%) rotate(5deg);/*ensures it is in center of image + rotates*/ 
 
} 
 
div {/*This stuff is for the text*/ 
 
    font-size: 40px; 
 
    line-height: 300px; 
 
    text-align: center; 
 
}

<div>HOVER ME</div>

Answer 2

Sie können einfach position: absolute für Ihr Bild und position: relative für Ihr Overlay, ad verwenden Justage der oberen Position und Breite nach Ihren Bedürfnissen. Hier ist ein Fiddle. Hoffe das hilft!

Bearbeiten: Hier ist ein updated version der Fiddle Demonstration Grenz- und Überlaufeigenschaften auf dem IMG-Container. Wie CBroe erwähnt hat, ist das Drehen eines Kreises in diesem Fall wahrscheinlich keine gute Zeit. Außerdem stimme ich definitiv zu, dass die Verwendung eines Pseudo-Elements ein viel sauberer Ansatz ist als das Verschachteln von Bildern.

Answer 3

Statt verschachtelten Elementen, können Sie nur ein Pseudo-Element verwenden. Dies ist am unteren Rand des Containers div platziert. Damit dies funktioniert, benötigen Sie position:relative und overflow:hidden auf dem Container div. Außerdem benötigen Pseudoelemente immer die content Deklaration.

Um den Grenzradius zu ändern, spielen Sie einfach mit left | width | height des Pseudo-Elements herum. Sie brauchen keine Rotation.

Anstelle von Hexadezimalfarbe und Deckkraft können Sie auch den "neuen" Farbraum rgba(r,g,b,a) verwenden, wobei a der Opazitätswert ist. Für das Passepartout verwenden Sie einfach die border Deklaration.

#image2{ 
 
    position:relative; 
 
    border:10px solid #888; 
 
    overflow:hidden; 
 
    box-shadow:0 0 4px #aaa; 
 
} 
 

 
#image2::after { 
 
    content:""; 
 
    display:block; 
 
    position: absolute; 
 
    bottom: 0;left:-10%; 
 
    background-color: #dc022e; 
 
    width: 120%; 
 
    height: 60%; 
 
    border-radius: 100% 100% 0 0; 
 
    opacity: 0.8; 
 
} 
 
    
 
#image2 img { 
 
    width: 100%; 
 
    display:block; 
 
    position:relative; 
 
}

<div id="image2"> 
 
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB"> 
 
    </div>