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
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