Wie erstellt man kreative Rahmen um ein Bild? (Nur CSS und HTML) [Anleitung Deutsch / Tutorial]

Heute habe ich mal wieder ein CSS Tutorial für euch aufgenommen und zwar möchte ich euch zeigen, wie man auf eine sehr einfache Weise bis zu 3 Rahmen um ein Bild legen kann und so so positionieren kann, dass es sehr kreativ aussieht und auffällt.

Es ist gar nicht mal so schwer, wir arbeiten heute mal mit :before und :after Befehle.

Video

HTML

<div class="container">
    <div class="about-img">
        <img src="generated-photos-child.jpg"></div>
</div>

CSS

body {
        background: black;
        margin: 50px;
        padding: 0px;
    }
     .about-img {
        position: absolute;
        border: red 3px solid;
        
    }

      .about-img:before {
        
        position: absolute;
        content: '';
        right: -50px;
        top: 20px;
        border: 10px solid rgba(255,255,255,0.6);
        width: 100%;
        height: 100%
    }
    
          .about-img:after {
        
        position: absolute;
        content: '';
        right: -90px;
        top: 40px;
        border: 10px solid rgba(255,0,255,0.6);
        width: 100%;
        height: 100%
    }