'CSS image gallery with name at bottom of image

I am trying to make an image gallery with the name of the image sitting inside the image at the bottom of it. I have been unsuccessful so far.

Picture of desired result:

enter image description here

HTML:

<!-- start content -->
    <div class='content'>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
    </div>
    <!-- end content -->

CSS:

.content {
    background-color: #404040;
    width: 940px;
    margin: 0 auto;
    padding: 20px 10px;
    overflow: hidden;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.photo {
    border-radius: 6px;
    border: 1px solid #ccc;
    width: 298px;
    height: 298px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    overflow: hidden;
    position: relative;
}

.photo-name {
    /*margin-top: 245px;*/
    /*padding: 0.5em;*/
    text-align: center;
    background-color: cyan;
    /*background-color: #666666;*/
}

Result: https://jsfiddle.net/h3x2ooax/

htmlcssimagecss-position


Solution 1:[1]

Your text needs to be in position: absolute to be visible, see this snippet :

.content {
	background-color: #404040;
	width: 940px;
	margin: 0 auto;
	padding: 20px 10px;
	overflow: hidden;
	border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.photo {
	border-radius: 6px;
	border: 1px solid #ccc;
	width: 298px;
	height: 298px;
	margin-top: 10px;
	margin-left: 10px;
	float: left;
	overflow: hidden;
	position: relative;
}

.photo-name {
    position: absolute;
    bottom: 15px;
    width: 100%;
    padding: 5px 0;
    font-size: 30px;
    color: white;
	text-align: center;
	background-color: #666666;
    font-style: italic;
    font-family: sans-serif;
}
	<!-- start content -->
	<div class='content'>
		<div class='photo'>
			<div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
			<div class='photo-name'>Name</div>
		</div>
		<div class='photo'>
			<div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
			<div class='photo-name'>Name</div>
		</div>
		<div class='photo'>
			<div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
			<div class='photo-name'>Name</div>
		</div>
		<div class='photo'>
			<div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
			<div class='photo-name'>Name</div>
		</div>
		<div class='photo'>
			<div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
			<div class='photo-name'>Name</div>
		</div>
	</div>
	<!-- end content -->

The updated JsFiddle: https://jsfiddle.net/h3x2ooax/3/

Solution 2:[2]

You have to set position: relative; to the .photo element.

And set position: absolute; and bottom: 0; to the photo's name element

You can change the property bottom to increase or decrease the distance to the bottom of the image

https://jsfiddle.net/v4j0a628/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 qbeauperin
Solution 2

Related Questions