johnstont05 johnstont05 - 3 years ago 161
CSS Question

How to get titles on each box?

I tried to color all of the divs differently for easier viewing. I would like to add a title to each, preferable in the bottom left hand corner of each box. If that is possible, that would be great. Also, these divs are responsive to mobile view so being able to get the text to work around that would be useful too. Thanks in advance.



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




Answer Source

You can create a <span> element inside each div and add the following CSS. I have implemented for first div with class one.

Changes made:

  1. Added position:relative to div with class one.
  2. For span under div, added the following:

.one span { position: absolute; bottom: 0; left: 0; }

.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;
	position: relative;
}

.one span {
	position: absolute;
	bottom: 0;
	left: 0;
}

.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">
		<span>One</span>
	</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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download