gallery-item caption

Please post a link to a sample. Thank you!

You should be able to put links in the captions just by wrapping them in a link tag.

So if you had a caption like:

Hello there

And you wanted that to link to Google, you should change the caption to:

<a href="http://google.com">Hello There</a>

You should just have to install a lightbox plugin. One of these should work fine for you:

• https://wordpress.org/plugins/simple-lightbox/
• https://wordpress.org/plugins/responsive-lightbox/
• https://wordpress.org/plugins/carousel-without-jetpack/

Just make sure that your gallery images are linking to Image File and not Attachement Page. Then the images should open up in a lightbox.

You would have to manually create new CSS to overlay the captions on the image. This plugin doesn’t control the appearance of your captions. The appearance of your captions is controlled by your theme.

This example is taken directly from the Twenty Fourteen site. It’s a great starting point:

.gallery-caption {
	background-color: rgba(0, 0, 0, 0.7);
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	max-height: 50%;
	opacity: 0;
	padding: 6px 8px;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: left;
	width: 100%;
}

.gallery-caption:before {
	content: "";
	height: 100%;
	min-height: 49px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.gallery-item:hover .gallery-caption {
	opacity: 1;
}

.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

Don’t worry about those lines. The lines you really need are:

.gallery-caption {
	background-color: rgba(0, 0, 0, 0.7);
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	max-height: 50%;
	opacity: 0;
	padding: 6px 8px;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: left;
	width: 100%;
}

.gallery-caption:before {
	content: "";
	height: 100%;
	min-height: 49px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.gallery-item:hover .gallery-caption {
	opacity: 1;
}