Position of Title and Excerpt on Masonry, and color of border on hover

Hi, I’m trying to do two things, and I can’t seem to get them just right.
Hopefully you can help me with it.

1) Position the Title and Excerpt on the top of the Masonry.

I’m using the code below to make the background black and transparant, and move the Title and Excerpt to the top.
A) The Title looks good, but I can’t get the Excerpt higher to make it look like in the attached image.
B) When scaling the page the Except moves high or lower, or disappears when there’s just three tiles visible. Testing on mobile the Excerpt sometimes get on top of the title. Is it possible to make it stick to the title and keep it there, even on mobile?

/*----------------------------------------
// CSS - Masonry title Alignment
//--------------------------------------*/
/* Title */
#top .av-masonry-entry-title {		
	color: #FFF; /* Apply the !important rule if the titles color do not change*/
	font-size: 26px;
	font-weight:500;
	text-align: left;
	position: absolute;
	top: 0;
	z-index: 1000;
	width: 90%;
	padding-top: 10%;
}

/* Masonry Content */
#top .av-masonry-entry.isotope-item .entry-content {
	color: #ff5200;
	font-size:16px;
	text-align: left;
}

/* Title Background */
#top .av-masonry-entry.isotope-item figcaption,
#top .av-masonry-entry.isotope-item .avia-arrow {
	background: rgba(0, 0, 0, 0.7);
}

2) Give the border of the masonry tiles an orange color on mouseover (and click).
After browsing this forum I came up with the the following code, but that doesn’t seem to do anything.
Any idea on how to make it look like in the attached image?

figcaption.av-inner-masonry-content.site-border:hover {
border-color: #00b1b0;
}

• This topic was modified 5 years, 5 months ago by rhae.