Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 24, 2015 at 10:22 pm #492521
    edupuntoes

    Hi,

    I’ve just setted up four linked images in four columns at the top part of my homepage. I need to use this four images as a menu for my portfolio (graphic design, logo design, etc…), each picture drives you to a diferent portfolio page.

    What I don’t know how to do is: place static images with a 0.4 transparency title (custom font), and when you hover the image, the excerp comes up and push up the title both toguether. How can I do this? with masonry grid or separated images in columns…

    I cannot show you the website, it’s still in localhost.

    August 25, 2015 at 10:42 am #492763
    Rikard

    Hey edupuntoes,

    It will be very difficult for us to help you out if we can’t see the page/backend in question, could you upload it somewhere so that we can have a look please?

    Best regards,
    Rikard

    August 25, 2015 at 11:32 am #492807
    edupuntoes

    Hi Rikard,

    Sorry for my poor explanation, I usually need images to explain this kind of things. Please see this two images: https://www.dropbox.com/sh/9a23dshk86ho92x/AAByJpOnWsWSXEXNHEi3m0c_a?dl=0

    You will see the hover effect that I need. Let me know if you need anything else pls.

    Thanks!
    Edu

    August 26, 2015 at 7:27 am #493321
    Rikard

    Hi,

    I think you want to use the Masonry element, all the settings for showing excerpt on hover is in the element options.

    Best regards,
    Rikard

    August 28, 2015 at 4:18 pm #494936
    edupuntoes

    Hi,

    But I cannot change excerpt and title behaviour…
    I found an example of an Enfold theme website, that shows what I want to do. I’ve sent you a link via private content. See the three images at the top of the homepage. This similar to what I want to do.

    August 31, 2015 at 7:56 am #495612
    Ismael

    Hey!

    The example on the site is not a masonry element. It is a code block with a custom script. You can contact codeable to create something similar: http://kriesi.at/contact/customization

    The developer created a container with a class or id attribute called “portfolio-description”. He then applied a custom css animation called “bottom”. This is the css code:

    .portfolio-description {
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0px;
    opacity: .55;
    transition: bottom 1s, opacity 1s;
    -webkit-transition: bottom .5s, opacity 1s;
}

    The “-webkit-transition: bottom .5s, opacity 1s;” is the custom css animation. Refer to this link for more info: http://www.w3schools.com/css/css3_animations.asp

    Best regards,
    Ismael

    August 31, 2015 at 8:58 am #495648
    edupuntoes

    Hi,

    Thanks for your solution. I didn’t know that service was available, it’s perfect.

    Enfold is the best theme I’ve ever used, super easy to set up.

    Much appreciated.

    Edu

    September 1, 2015 at 4:33 am #496201
    Rikard

    Hi,

    Glad we could help and thanks for the kind words :-)

    Thanks,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.