Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #931466

    Hi,

    Is it possible to have some sort of text overlay on a portfolio grid module item?
    You can see an example on the following Enfold page (scroll down to images of bicycle categories).
    Can you tell me how they did this? See private link

    Regards Rob

    • This topic was modified 2 years, 3 months ago by  jojoba007.
    #931559

    Hey jojoba007,

    This modification requires some time. Please wait while I work on your ticket and update you with the results here.

    Thank you for using Enfold :)

    Best regards,
    Vinay

    #931612

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    /* Portfolio overlay with title */
    
    /* Disable default animation */
    #top .grid-entry  a:hover .image-overlay .image-overlay-inside {
        	animation: none;
        }
    
    /* Overlay */
    #top .grid-entry .image-overlay .image-overlay-inside:before {
    	content:'';
        position: absolute;
        background: #222;
        height: 100%;
        width: 100%;
        border-radius:0;
        top: 0;
        left: 0;
        margin: 0;
        }
    /* Remove default title below */
    .grid-content .avia-arrow,
    #top .grid-entry  .grid-content {
    	display: none;
    }
    
    /* 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: #ffffff !important;
    	top: 50%;
    	transform: translateY(-50%);
    	animation: avia-fadein 0.75s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)  !important;
    }
    

    Best regards,
    Vinay

    #1139783

    This *almost* works for me, the title is offset horizontally, any ideas?
    example

    #1139786

    Ok, so I’ve made some progress with this
    example
    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 9 months, 4 weeks ago by  Jason.
    #1140665

    Hi Jason,

    I am getting a 404 on that page. Are the excerpts loaded on the page at all?

    Best regards,
    Victoria

    #1140801

    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 :)

    #1141597

    Hi Jason,

    Oh :) I looked at the original post and did not realize that it was not you who started the thread.

    You need to add excerpts. Take a look here
    https://kriesi.at/support/topic/portfolio-grid-add-excerpt-under-title/#post-578348

    Best regards,
    Victoria

    #1141639

    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.

    #1141907

    Hi Jason,

    Yes, of course, I understood all of the above from the original reply. But the thing is I do not see the excerpt rendered in the html and so you cannot really have it in the overlay, even if you could JavaScript to move it to the overlay. This is why I gave you the link to the thread where you can see how the excerpts can be added.

    Best regards,
    Victoria

    #1142054

    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

    #1142181

    Hi Jason,

    Great :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1201871

    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

    #1202743

    Hi Andrew,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #1203322

    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

    #1203611

    Hi Andrew,

    I tried to come up with the css and could not find a viable solution, unfortunately. It’s tricky with the positioning for Masonry calculated and set in JavaScript.

    Best regards,
    Victoria

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.