Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #589059

    Hi,

    I would like to have an image with
    a) caption (like “Christian Budschedl – Founder of Kriesi.at”)
    b) social icons with tooltips when hovering the image

    like the image at Kriesi’s About Page here

    I tried the “image” from the ALB – but there is nothing for the social icons and tooltips when hovering it.
    Could you please point me in the right direction please?

    Thank you!

    #589085

    Ah okay, I found out, that it is obviously made with the “Team Member” element of the ALB, right?

    But how can I make the caption like at Kriesi’s About Page?
    I mean these 2 lines with black-transparent background?

    My settings: http://screencloud.net/v/ijUr
    result in this: http://screencloud.net/v/5itZ

    How can I have it exactly like the image at Kriesi’s About Page please (caption in the image with black-transparent background?)?

    Thank you.

    #590187

    Hi!

    Thank you for using Enfold.

    Add this in the Quick CSS Field:

    .avia-team-member .team-social {
        border: 7px solid rgba(0,0,0,0.1);
        position: absolute;
        font-size: 19px;
        background: #fff;
        background: rgba(255,255,255,0.7);
        opacity: 0;
        visibility: hidden;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        border-radius: 3px;
    }

    Best regards,
    Ismael

    #593824

    Thank you, but this works not at all – there just happens nothing with this code – it looks like before: https://screencloud.net/v/5itZ and not like the image at Kriesi’s About Page here

    Perhaps it is important to know, that I placed the “Team member” element within the ALB in a column?
    The “visibility:hidden” is right??

    #593828

    Hi Ismael,

    I think, I got it … I have allowed myself to “steal” this part of code with Firebug from the About Page, hope this is okay:

    /* TeamMember */
    
    .avia-team-member .team-social {
        border: 7px solid rgba(0,0,0,0.1);
        position: absolute;
        font-size: 19px;
        background: #fff;
        background: rgba(255,255,255,0.7);
        opacity: 0;
        visibility: hidden;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        border-radius: 3px;
    }
    
    #top .team-member-name {
        background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
        clear: both;
        color: #fff;
        float: left;
        font-family: "Open Sans";
        margin: 0;
        padding: 5px 17px;
        position: relative;
        top: -100px;
        z-index: 5;
    }
    
    #top .team-member-job-title {
        background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
        clear: both;
        color: #fff;
        float: left;
        font-family: "Open Sans";
    	font-size: 13px;
        margin: 0;
        padding: 5px 17px;
        position: relative;
        top: -100px;
        z-index: 5;
    }
    
    #top .team-member-job-title a {
        color: #ffffff;
    	text-decoration: none;
    	font-weight: normal;
    }
    #top .team-member-job-title a:hover {
    	font-weight: bold;
    }

    which looks now like

    Thank you — SOLVED —

    #594899

    Hey!

    Great! Glad you figured it out. :)

    Best regards,
    Ismael

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

The topic ‘How to: image with caption & social icons when hovering like Kriesi's About Page’ is closed to new replies.