Portfolio grid text overlay

Ok, so I’ve made some progress with this

by amending the following to:

.grid-entry a:hover:before {
	content: attr(title);
	position: absolute;
	width: 100%;
	z-index: 1000;
	text-align: center;
	opacity: 1;
	font-size: 18px;
	color: #ffffff !important;
	transform: translateY(-50%);
	animation: avia-fadein 0.75s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)  !important;
	top: 50%;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

Final piece of the puzzle for me, is to get the excerpt in there, below the title – any ideas anyone?

• This reply was modified 5 years, 2 months ago by Jason.

Hi Victoria,
I’m not sure what page you’re talking about as I didn’t link to one(?)
In any case, I’ll provide a link to this page in the private content area for you now.
Thanks :)

Hi Victoria,
I’ve kind of already got this, as you can see above i’m not displaying anything below the grid image – but on top of it, on hover. i already have the title appearing, & have title & excerpt selected via the grid options, plus I have added an excerpt to the post, but it’s not displaying the excerpt – only the title.
here’s the css i’ve used (found on another thread here):

/* Portfolio overlay with title - disable default animation */
#top .grid-entry a:hover .image-overlay .image-overlay-inside {
	animation:none;
}

/* Portfolio overlay with title - overlay */
#top .grid-entry .image-overlay .image-overlay-inside:before {
	content:'';
	position:absolute;
	background:#1d2553; /* blue */
	height:100%;
	width:100%;
	border-radius:0;
	top:0;
	left:0;
	margin:0;
}

/* Portfolio overlay with title - remove default title below */
.grid-content .avia-arrow,#top .grid-entry .grid-content {
	display:none;
}

/* Portfolio overlay with title - display title on hover*/
.grid-entry a:hover:before {
	content:attr(title);
	position:absolute;
	width:100%;
	z-index:1000;
	text-align:center;
	opacity:1;
	font-size:18px;
	color:#fff!important;
	transform:translateY(-50%);
	animation:avia-fadein .75s 1 cubic-bezier(0.175,0.885,0.320,1.275)!important;
	top:50%;
	padding:0!important;
	display:flex!important;
	align-items:center;
	justify-content:center;
}

.avia_transform a:hover .image-overlay {
	opacity:1!important;
}

so i want the excerpt to appear below the title.

Hi Victoria,
Yes, odd how the excerpt isn’t in the HTML, I’ll revisit that other thread & look a little closely at it.
Will report back.
Thanks,
Jason

Hi all,

I was able to use the above code but in addition I would like to have a space (20px) between de overlay and all sides of the image. I’ve tried to add an margin to the .image-overlay class but that didn’t work. Would you be able to tell me how I can get a space between the actual image and the overlay?

The goal would be to have a over that looks similar to this: https://enea.ch/projekte/

If you need more info please let me know.

Kind regards,
Andrew

Hi Victoria,

here is the link to the site which I am working on https://gardens.ch/privatgaerten/
As already mentioned I would like it to have a margin to the border like in this example: https://enea.ch/projekte/

Kind regards,
Andrew