0
J'ai essayé de colorer différemment tous les divs pour faciliter la visualisation. Je voudrais ajouter un titre à chacun, préférable dans le coin inférieur gauche de chaque case. Si c'est possible, ce serait génial. En outre, ces divs sont sensibles à la vue mobile, donc être en mesure de faire fonctionner le texte qui serait utile aussi. Merci d'avance.Comment obtenir des titres sur chaque boîte?
.wrapper {
max-width: 900px;
margin: 0 auto;
}
.wrapper > div {
background-color: lightcoral;
padding: 3em;
color: white;
}.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1;
grid-row: 1;
background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
background-position: 610px 500px;
}
.two {
grid-column: 2;
grid-row: 1 /3;
background-image: url('http://www.solidbackgrounds.com/images/2560x1440/2560x1440-indigo-web-solid-color-background.jpg');
}
.three {
grid-column: 1;
grid-row: 2 /3;
background-image: url('http://www.extremetech.com/wp-content/uploads/2012/02/GreenBackground.png');
}
.four {
grid-column: 3;
grid-row: 1/4;
background-image: url('http://www.ledr.com/colours/grey.jpg');
}
.five {
grid-column: 1 /3;
grid-row: 3;
background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
}
.six {
grid-column: 1/4;
grid-row: 4 ;
background-image: url('http://www.solidbackgrounds.com/images/2560x1440/2560x1440-indigo-web-solid-color-background.jpg');
}
.seven {
grid-column: 1;
background-image: url('http://www.extremetech.com/wp-content/uploads/2012/02/GreenBackground.png');
}
.eight {
grid-column: 1;
grid-row: 8/5;
background-image: url('https://i.ytimg.com/vi/3qlRNWBWr5o/maxresdefault.jpg');
}
.nine {
grid-column: 2;
grid-row: 7/5;
background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
}
.ten {
grid-column: 3;
background-image: url('https://i.ytimg.com/vi/3qlRNWBWr5o/maxresdefault.jpg');
}
.eleven {
grid-column: 3;
grid-row: 7/6;
background-image: url('http://www.solidbackgrounds.com/images/2560x1440/2560x1440-indigo-web-solid-color-background.jpg');
}
.twelve {
grid-column: 2/4;
grid-row: 7;
background-image: url('http://www.extremetech.com/wp-content/uploads/2012/02/GreenBackground.png');
}
.thirteen {
grid-column: 1/4;
grid-row: 8 ;
background-image: url('https://i.ytimg.com/vi/3qlRNWBWr5o/maxresdefault.jpg');
}
/*HOVER*/
.one:hover {
opacity: .6;
}
.two:hover {
opacity: .6;
}
.three:hover {
opacity: .6;
}
.four:hover {
opacity: .6;
}
.five:hover {
opacity: .6;
}
.six:hover {
opacity: .6;
}
.eight:hover {
opacity: .6;
}
.nine:hover {
opacity: .6;
}
.ten:hover {
opacity: .6;
}
.eleven:hover {
opacity: .6;
}
.twelve:hover {
opacity: .6;
}
.thirteen:hover {
opacity: .6;
}
@media only screen and (max-width: 768px) {
.wrapper {
display: block;
}
.margin-bot {
margin-bottom: 2px;
}
}<div class="wrapper">
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="one margin-bot"></div>
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="two margin-bot"></div>
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="three margin-bot"></div>
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="three margin-bot"></div>
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="four margin-bot"></div>
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="five margin-bot"></div>
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="six margin-bot"></div>
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="eight margin-bot"></div>
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="nine margin-bot"></div>
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="ten margin-bot"></div>
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="eleven margin-bot"></div>
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="twelve margin-bot"></div>
<div onclick="location.href='landing.html';" style="cursor: pointer;" class="thirteen margin-bot"></div>
</div>