Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 7, 2014 at 5:25 pm #331783
    richbuddy

    Hello,

    I’m trying to use enfold to achieve this simple look, wonder if it is possible with enfold theme.
    http://international.schwab.com/public/international/us_investing

    I tried using a color section for the background and image element for the metro-like element but here are some of the problems that i face:

    I. Problems that I think can be solved with CSS but have no idea how to do it
    – can’t reduce the opacity of the image element
    – can’t arrange the position of the image element
    – can’t get the hover over effect on the image element like the site, it does however come with the enfold hover over effect (the one which show a circle and arrow to redirect the image link)
    – top padding of the color section is too big, tried to use some general css code to set the top padding to 0px but not working

    If there is other approach that is more compatible, do let me know as well.
    Thanks.

    October 7, 2014 at 5:55 pm #331807
    Sandie

    http://www.w3schools.com/ is a pretty helpful site
    Opacity – http://www.w3schools.com/css/css_image_transparency.asp
    Positioning – http://www.w3schools.com/css/css_positioning.asp
    Hover – http://www.w3schools.com/cssref/sel_hover.asp

    October 7, 2014 at 7:11 pm #331848
    richbuddy

    Thanks for the link but my problem is not with the basic CSS understanding.

    I do no know how to apply these CSS into enfold elements. I’m not sure which enfold element class should i apply those CSS in the general styling css box.

    October 7, 2014 at 8:38 pm #331880
    Josue

    Hi!

    I think it would be more conveniente to use LayerSlider in this case, that way you have full control of the elements (layers) position and styling.

    Cheers!
    Josue

    October 7, 2014 at 10:18 pm #331920
    richbuddy

    Hi,

    I find that it’s easier using advanced layer slider to build the effects.
    Manage to get it to work so far but stuck with the hover over opacity effects. Following is the css code that i use on the custom css in the slider layers:

    img {
opacity:0.80;
}
img:hover {
opacity: 0.95;
}

    Can’t get the hover opacity to works… Anyone can correct the CSS code?

    October 7, 2014 at 10:35 pm #331931
    Josue

    Hi!

    That should work in theory, try adding !important, can you post a link to the page where you are trying this?

    Regards,
    Josue

    October 7, 2014 at 10:47 pm #331939
    richbuddy

    Hmm, added the !important tag but still not working.

    Here’s the page rbgam.com

    Thanks.

    • This reply was modified 9 years, 6 months ago by richbuddy.
    October 7, 2014 at 11:12 pm #331946
    Josue

    Try setting a custom class to those layers (opaque-layer), then add this to Quick CSS:

    .opaque-layer {
    opacity: 0.8 !important;
}
.opaque-layer:hover {
    opacity; 0.95 !important;
}

    Cheers!
    Josue

    October 7, 2014 at 11:36 pm #331956
    richbuddy

    hmm can’t get it to work…
    Just to be sure in the advanced layer slider under the image layers > attributes setting there are
    Attributes ID ____ Classes ____ Title ___ Alt___ Rel___

    So i key in opaque-layer under the “classes” box and use the CSS code you work out on Custom CSS? Did I missed out anything?

    October 8, 2014 at 12:41 am #331986
    Josue

    Hi,

    Can you please create me a WordPress administrator account? post it here as a private reply.

    Regards,
    Josue

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