Tengo una tarea en la que tengo que crear dos cuadros detrás de una imagen. Imagen a continuación:
Lo complicado es que no tengo acceso a ningún html, solo puedo usar CSS (sass) y Javascript.
Intenté usar ::before y ::after pseudo elemento, pero sin suerte.
Aquí está mi código html:
<div id="block-about-me" class="block block-block-content block-block-content0a878c11-300c-4b78-a843-f455f03df025 agiledrop-content-full-about-me"> <div class="container" id="challenge-about-me"> <div class="content-left"> <h2>About me</h2> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut enim ligula. Vestibulum ac pharetra risus. Mauris egestas, risus eget posuere vulputate, dolor risus molestie velit, in rutrum felis justo et velit. Praesent finibus dui quis neque hendrerit, sed dictum nisl scelerisque. </p> </div> </div> <div class="img-right"> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img src="/frontend-challenge/sites/default/files/styles/about_me/public/2020-02/about_2.jpeg?itok=kXvb3ZcW" width="525" height="480" alt="About me" typeof="foaf:Image" class="image-style-about-me" /> </div> </div> </div> </div>Y el Sass:
#block-about-me{ padding: 245px 195px 245px 195px; #challenge-about-me{ @include flexCenter; .content-left{ width: 50%; margin-right: 4%; h2{ @include sectionHeader; } h2::after{ @include sectionHeaderAfter; } p{ margin-top: 100px; font-size: $bodySize; line-height: 30px; color: $darkerBodyColor; font-weight: 400; position: relative; z-index: 999; } } // END .content-left .img-right{ width: 50%; text-align: center; .image-style-about-me{ position: relative; z-index: 1; } .image-style-about-me::before{ content: ''; position: absolute; width: 100px; height: 100px; background-color: blue; top: -20px; left: -20px; z-index: -1; } } // END .img-right } // END #challenge-about-me } // EMD #block-about-me (section)Ya he intentado apuntar a la etiqueta img, sus clases, diferentes índices z, etc.