Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • May 12, 2016 at 6:59 am #631163
    clairemartindigital

    Hi there,

    using enfold on website build number 5 now. Loving it!

    How can i have the portfolio item centred vertically in each of the tiles? Below is what i used so far to have the title display on hover. It is currently horizontally centred, but not vertically.

    .image-overlay-inside:before{
    display: none !important;
    }
    .image-overlay {
    background: #ffffff;
    }
    .grid-image:before {
    content: attr(title);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    opacity: 0;
    font-weight: 200;
    font-size: 24px;
    color: #ffffff !important;
    top: 50%;
    }

    .grid-image:hover:before {
    opacity: 0.9;
    }

    .grid-image:before{
    transition: all linear 0.2s;
    }

    .grid-content {
    display: none !important;
    }

    #block-post article .slide-content {
    position: absolute;
    top: 0;
    }

    May 13, 2016 at 4:41 am #631767
    Rikard

    Hi clairemartindigital,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    May 13, 2016 at 4:57 am #631775
    clairemartindigital

    Oops – please see below

    May 13, 2016 at 5:00 am #631777
    clairemartindigital

    Hello again,

    I realised that my question was unclear…

    The question should be: How can I have the portfolio item title centred vertically? You can see it currently is a little too low.

    May 16, 2016 at 3:21 pm #632982
    Andy

    Hi,

    Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Andy

    May 16, 2016 at 10:42 pm #633349
    clairemartindigital

    View post on imgur.com

    May 17, 2016 at 10:51 am #633611
    Andy

    Hi,

    hm? it’s unclear to me where to look at on your website. I can’t find the elements in question and not sure what you want to show us with the red arrow. Can you make things clear for us please?

    Best regards,
    Andy

    May 17, 2016 at 10:55 am #633614
    clairemartindigital

    Sure,

    if you go to:

    http://globalspeed.com.au/#product

    scroll down and you see the product portfolio grid. if you move your mouse over obe of the tiles you will see the title appear. That title is what we are talking about.

    May 17, 2016 at 11:12 am #633628
    Andy

    Hi,

    now I get it, thx. Use this code inside of Quick CSS field:

    .grid-image:hover:before {
top: 50px;
}

    and adjust as needed.

    Best regards,
    Andy

    May 17, 2016 at 11:27 am #633635
    clairemartindigital

    thanks andy, the problem is now that the image resizes depending on browser size. but the title stays fixed at for example top: 86px; is there a way to have the title adjust to the size of the tile?

    thanks

    May 17, 2016 at 12:08 pm #633659
    Andy

    Hi,

    you could add media queries to my code, to adjust it for different screen sizes, something like:

    @media only screen and (max-width: 767px) {
.grid-image:hover:before {
top: 20px;
}}

    Adjust as needed.

    Best regards,
    Andy

    May 18, 2016 at 11:50 am #634331
    clairemartindigital

    Thanks Andy, this ticket can be closed.

    May 18, 2016 at 2:07 pm #634466
    Andy

    Hi,

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Portfolio grid titles’ is closed to new replies.