Title and Excerpt Hover

Hey Grumpy2015,

I answered your question on the cactus masonry website FAQ page. Did you not receive a notification? If not, I may have to look at changing that page.

Here’s what I wrote there:

Try setting the shortcode to crop images – e.g.:
[cactus-masonry quality="medium" display_post_titles="true" width="50%" crop_images="true" horizontal_spacing="0" vertical_spacing="0"]

Then implement the following CSS:

div.cactus_masonry_databox {
	-webkit-transition: opacity 250ms ease-in-out;
	-moz-transition: opacity 250ms ease-in-out;
	-o-transition: opacity 250ms ease-in-out;
	transition: opacity 250ms ease-in-out;
	opacity: 0;
	top: 0 !important;
}
.masonry_brick_a .cactus_masonry_cropped {
	-webkit-transition: transform 250ms ease-in-out;
	-moz-transition: transform 250ms ease-in-out;
	-o-transition: transform 250ms ease-in-out;
	transition: transform 250ms ease-in-out;
	-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.masonry_brick_a:hover .cactus_masonry_cropped {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}
.masonry_brick_a:hover div.cactus_masonry_databox {
    opacity: 1;
}
.masonry_brick_a .cm_title {
	position: absolute;
	top: 50%;
	-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	left: 0;
	width: 100%;
	text-align: center;
	right: 0;
}
.masonry_brick_a .cm_title:after {
	content: "\2014  view \2014";
	display: block;
	margin-top: 5px;
	font-size: 75%;
}

You totally rock. I didn’t get an email about your other reply, thank you for getting back to me here.

One last question, I implemented the above and it looks great. Is it possible to have the excerpt show under the Title and before “View”?

I tweaked yours slight to include excerpt true, but the excerpt is showing at the very top rather than underneath the title/centered.

[cactus-masonry quality=”medium” display_post_titles=”true” display_post_excerpts=”true” width=”30%” crop_images=”true” horizontal_spacing=”0″ vertical_spacing=”0″]

That’s unfortunate, but good to know. I will have to look into that.

Okay, now try this.

.masonry_brick_a {
	background-color: #000 !important;
}
div.cactus_masonry_databox {
	position: absolute;
	top: 50%;
	bottom: unset !important;
	left: 0;
	right: 0;
	width: 100%;
	background-color: transparent !important;
	-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	-webkit-transition: opacity 250ms ease-in-out;
	-moz-transition: opacity 250ms ease-in-out;
	-o-transition: opacity 250ms ease-in-out;
	transition: opacity 250ms ease-in-out;
	opacity: 0;
	text-align: center !important;
}
.masonry_brick_a .cactus_masonry_cropped {
	-webkit-transition: transform 250ms ease-in-out;
	-moz-transition: transform 250ms ease-in-out;
	-o-transition: transform 250ms ease-in-out;
	transition: transform 250ms ease-in-out;
	-webkit-transition: opacity 250ms ease-in-out;
	-moz-transition: opacity 250ms ease-in-out;
	-o-transition: opacity 250ms ease-in-out;
	transition: opacity 250ms ease-in-out;
	-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
	opacity: 1;
}
.masonry_brick_a:hover .cactus_masonry_cropped {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
	opacity: 0.6;
}
.masonry_brick_a:hover div.cactus_masonry_databox {
    opacity: 1;
}
.masonry_brick_a .cactus_masonry_databox:after {
	content: "\2014  view \2014";
	display: block;
	margin-top: 5px;
	font-size: 75%;
}

YES!! Thank you!!!!!

I was curious if it’s possible to remove the Loading feature from showing altogether?

Hey Grumpy2015,

Try [cactus-masonry show_loader="false"]

Cheers