28172 sujets

CSS et mise en forme, CSS3

Bonjour
Je souhaite réaliser ce type de présentation, mais j'ai quelques lacunes
Je fais des superpositions d'image avec le code suivant:
HTML :
<figure class="superposition03">
<img src="images/exemple-01.jpg" width="600" height="600" alt="XXXXX">
<img src="images/exemple-02.jpg" width="250" height="250" alt="YYYYY">
<figcaption>Blabla</figcaption>
</figure>

CSS :
.superposition03 {display: inline-block;
position: absolute;
top: 0px; left: 0px;
}
.superposition03 img:first-of-type {
height: 600px;
width: auto;
}
.superposition03 img:last-of-type {
box-shadow: 8px 8px 12px #aaa;
height: 250px;
width: auto;
}
.superposition03 img:nth-of-type(2) {
position: absolute;
right: -20%;
top: 65%;
}
.superposition03 figcaption {
position: absolute;
bottom: 50px;
left: 10px;
right: 0px;
text-align: left;
font-size: 15px;
font-weight: bolder;
color: black;
}
Mais je n'arrive pas à l'adapter pour remplacer la seconde image par un texte "encadre"..
Merci d'avance pour votre aide