How to: image with caption & social icons when hovering like Kriesi's About Page - Support

Tagged: caption, hover, image, social icons, tooltips

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

Author

Posts
February 25, 2016 at 1:59 pm #589059

BeeCee
Participant

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!

February 25, 2016 at 2:21 pm #589085

BeeCee
Participant

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.

February 27, 2016 at 8:29 am #590187
Ismael
Moderator
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
March 6, 2016 at 1:16 am #593824

BeeCee
Participant

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??

March 6, 2016 at 1:47 am #593828
BeeCee
Participant
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 —
March 8, 2016 at 9:52 am #594899

Ismael
Moderator

Hey!

Great! Glad you figured it out. :)

Best regards,
Ismael
Author

Posts