Display a text when the mouse is over the image - Support | Kriesi.at

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

Author

Posts
January 14, 2018 at 1:42 am #896989

Stegemueller
Participant

Hi there,

I am sure this is simple, but I really can’t find a solution anywhere:

On a few specific images I have to add a text about Copyright, that should only be visible, when the mouse is over the picture. I think this is what is called “hover”. I have looked many places, forums, Google, and of course this site, but I really can’t find something called hover in great Enfold.

I hope you can give me a little bit of advice.

Best regards,
Hanne
Denmark.

January 14, 2018 at 7:36 pm #897149

Nikko
Inactive Moderator

Hey Stegemueller,

Can you give us a link to your site? also point us the images and what text should be shown on hover, so we can try to give you css code that might help.

Best regards,
Nikko

January 14, 2018 at 10:45 pm #897228
Stegemueller
Participant
Hey Nikko

Thanks a lot for your kind and fast reply.

One example is here: https://supportpcogandet.dk/regler/ and one is in the footer here: https://supportpcogandet.dk/ Under the paragraf sign image I would like a have a text called: “Creative Common CC BY-SA 3.0-licensen. Dette billede er i overensstemmelse hermed.” when the mouse is over the image.

It would be great if you ca give me some advice.

Best regards,

Venlig hilsen
- This reply was modified 6 years, 11 months ago by Stegemueller.
January 15, 2018 at 5:01 am #897360
Nikko
Inactive Moderator
Hi Venlig hilsen,

I checked it and it’s a bit trickier, can you please post us your login credentials (in the “private data” field), so we can try to make the modification on your footer and tell you how it was done.
1. Install and activate ” Temporary Login Without Password “.
2. Go to ” Users > Temporary Logins ” on the left-side menu.
3. Click ” Create New “.
4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
 ( do be sure that we have enough time to debug ).
5. Click ” Submit “.
6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.
When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

Best regards,
Nikko
January 15, 2018 at 11:30 am #897476

Stegemueller
Participant

Hi Nikko

I now have created a temporary account and added the link to the private box.

I really wonder, why great Enfold does not have the possibility built in – but anyway I am happy, that you’ll try to help me out.

Best regards
Hanne

January 15, 2018 at 4:17 pm #897600

Nikko
Inactive Moderator

Hi Hanne,

Thanks for providing the login however it’s asking for a verification code, can you disable the verification?

Best regards,
Nikko

January 15, 2018 at 7:04 pm #897677

Stegemueller
Participant

Hi Nikko

In the private box I send you my own credentials. And I have double checked, that Two-Factor Authentication from iThemes is disabled.

Best regards,
Hanne

January 17, 2018 at 11:06 am #898376

Victoria
Inactive Moderator

Hi Hanne,

I tried to login and still was asked for the verification code. Can you please check?

Best regards,
Victoriax

January 17, 2018 at 12:11 pm #898415
Stegemueller
Participant
Hi Victoria

It is really strange. I checked agian and there is really no two-factor-thing.

Instead I created a new user for you. Detalis in the private box.

Best regards
Hanne
- This reply was modified 6 years, 11 months ago by Stegemueller.
January 21, 2018 at 1:20 pm #900350

Stegemueller
Participant

Hi Victoria

Am I forgotten?

Best regards,
Hanne

January 22, 2018 at 5:05 am #900572

Nikko
Inactive Moderator

Hi Hanne,

Sorry for late response, I have made changes on your footer and clearing browser cache is needed to properly view the changes, I have adjusted the footer size, let us know if it’s good.

Best regards,
Nikko

January 22, 2018 at 11:48 am #900754

Stegemueller
Participant

Hi Nikko

Thanks a lot, it works perfectly right, and just as I wanted – actually better!
And it was not my intention to be rude, when I asked, if I was forgotten!

Can you explain to be how I fix my other pictures, that needs this license? For example I have another one here: https://supportpcogandet.dk/regler/ and more will occur as the site is growing.

We are a gruop of people gathering on this site with 17.300+ users, so we need to be aware ogflicensenses and other rules. For this reason, I would like to learn how to do this.

And I really wonder why it is not built into wonderfull Enfold?

Best regards,
Hanne

January 23, 2018 at 6:02 am #901182
Nikko
Inactive Moderator
Hi Hanne,

No worries, we don’t see your response as rude :) As for the images, you can add it the same as I did by editing the image from Visual to Text (tab), and you should see a code like this:
```
<img class="alignleft size-full wp-image-3797" src="image_link" alt="" width="141" height="200" />
```
and replace it with this:
```
<img class="alignleft size-full wp-image-3797" src="image_link" alt="" width="141" height="200" />Creative Common CC BY-SA 3.0-licensen. Dette billede er i overensstemmelse hermed.
```
it should work properly. Just replace image_link in the code with the url in private content. Hope the instruction is clear, if not please let us know :)

Best regards,
Nikko
January 23, 2018 at 9:37 am #901297
Stegemueller
Participant
Hi Nikko,

Thank you very much for your quick reply.

I am in doubt. what you mean by this: “editing the image from Visual to Text (tab),”? I am sure this question is pretty silly!

I use the builder, and here I can’t find any text tab. When I try to open up the default editor it is (of course) empty. As an example I need to put the small text on the iMac on my front-page https://supportpcogandet.dk . Where do I start?

Have a great day.

Best regards,
Hanne
- This reply was modified 6 years, 11 months ago by Stegemueller. Reason: I forgot something
January 23, 2018 at 10:56 am #901351
Nikko
Inactive Moderator
Hi,

No worries, you can find it in this screenshot: https://imgur.com/a/WejoH

You can then insert the image like you usually do then just you should find an image code just like this:
```
<img class="alignleft size-full wp-image-3797" src="image_link" alt="" width="141" height="200" />
```
then before the img code add:
```

```
and after that img code add:
```
Creative Common CC BY-SA 3.0-licensen. Dette billede er i overensstemmelse hermed.
```
You can replace the Creative Common text if you want to change it, the final output should look like this:
```
<img class="alignleft size-full wp-image-3797" src="image_link" alt="" width="141" height="200" />Creative Common CC BY-SA 3.0-licensen. Dette billede er i overensstemmelse hermed.
```
Best regards,
Nikko
January 23, 2018 at 1:56 pm #901449
Stegemueller
Participant
Hi Nikko,

Thank you (again).

I promise you, I cant see any text tab along with the large photo of the iMac on my front page.
I wish, I could send you a screen shot. I made an image and reated a link: http://supportpcogandet.dk/No-text-tab-here-nikko.png

I know where to find the text tab, when I use the default editor.

Maybe you can log in and send me a screen shot, so that I can see what I miss and do wrong? I add my e-mail-address in the Private Content section.

Best regards,
Hanne
- This reply was modified 6 years, 11 months ago by Stegemueller.
January 23, 2018 at 2:47 pm #901469
Stegemueller
Participant
Hi again Nikko

Your solution looks the best! And if it is possible, I would prefer that.

***But so far I found a simple solution myself. I put my text in “Atributes” – I should have been aware of this long time ago.*** Oh no, I just realized that this only works in the default editor.

Best regards,
Hanne
- This reply was modified 6 years, 11 months ago by Stegemueller.
January 23, 2018 at 5:57 pm #901586

Nikko
Inactive Moderator

Hi Hanne,

Glad to hear that :) Let us know if you need further assistance or if we can close the thread.

Best regards,
Nikko

January 23, 2018 at 6:17 pm #901600

Stegemueller
Participant

Hi Nikko,

I think you read my latest message(s) a little bit too fast :-)

I thought I had resolved it, but I realised later, that the possibility with attributes is only available in the default editor, but I use the avia builder.

Here is a link of my page with an image, so you can see, what I see, and I am sorry to say, that I don’t see a text tab where I can insert your code snippet. What is my mistake?

http://supportpcogandet.dk/No-text-tab-here-nikko.png

Best regards,
Hanne

January 24, 2018 at 8:59 pm #902309

Nikko
Inactive Moderator

Hi,

The text tab isn’t available on the Image module, you can instead use Text Block, click on Add Media button then select an image then on the right side of the popup box, there’s a Caption field, just add the text there and it should work :)

Best regards,
Nikko

January 24, 2018 at 11:58 pm #902435
Stegemueller
Participant
Hi Nikko

Yes! That’s it.

Now – with your fine explanation – I tried on my testsite:: https://design.stegemueller.dk/ and I have added the code to the large iMac. When I hover, the text is slightly visible on the middle of the iMac screen, so nobody can see it.

Will you help me with some code that makes the text being showed under the image or to one of the sides, just like you made it with the figures in the footer – because that looks really nice? I wish I was able to write CSS. That will be my next challenge.:-)

Best regards,
../Hanne
- This reply was modified 6 years, 11 months ago by Stegemueller.
January 25, 2018 at 12:51 am #902448

Nikko
Inactive Moderator

Hi,

Glad to hear that. I have checked on your site especially the large imac but I couldn’t see the caption: https://imgur.com/a/Ojo1m

Best regards,
Nikko

January 25, 2018 at 3:15 pm #902869
Stegemueller
Participant
Hi Nikko,
I am sorry to tell you, I can’t make it work.

To reasume:

My wish is to get the same function on for example the large iMac on the homepage as you have made so nicely in the footer: black text showing up when mouse is over the image.

I tried on my design site:: https://design.stegemueller.dk/ and I have added this code in the text box that has an image in it.
I use the text field in the upper right corner in this text block.
I insert this code according to your advice earlier:
```


<img class="aligncenter wp-image-4067 size-full" title="" src="https://design.stegemueller.dk/wp-content/uploads/2018/01/Stort-billede-homepage.png" alt="" width="600" height="496" />

Creative Common CC BY-SA 3.0-licensen. Dette billede er i overensstemmelse hermed.
```
Then I get just a normal text under the iMac.

I really try to do, as you say, but I can’t make it work. For this reason I add my credentials in the private section, and hope you can tell me what is wrong.

Best regards,
../Hanne
January 27, 2018 at 7:42 pm #903733
Nikko
Inactive Moderator
Hi,

Sorry for the late response, it should work now, I have added this css code in Quick CSS:
```
#footer .widget,
#top .st-wrap {
 position: relative;
}

#top .st-wrap {
 float: left;
 padding-bottom: 30px;
}

#footer .textwidget {
 min-height: 160px;
 padding-bottom: 20px;
}

#top #footer .textwidget p {
 font-size: 13px;
}

#footer .textwidget .site-title img,
#top .st-wrap .site-title img {
 display: block;
}

#footer .textwidget .site-title .hovertitle,
#top .st-wrap .site-title .hovertitle {
 position: absolute;
 left: 0;
 top: 184px;
 font-size: 11px;
 line-height: 1.2;
 display: none;
}

#top .st-wrap .site-title .hovertitle {
 line-height: 1.4;
}

#footer .textwidget .site-title:hover .hovertitle,
#top .st-wrap .site-title:hover .hovertitle {
 display: block;
}
```
Best regards,
Nikko
January 28, 2018 at 2:43 pm #903878

Stegemueller
Participant

Hi Nikko,

Thanks a lot!

Now it is fine.

Best regards,
Hanne,
Denmark

January 29, 2018 at 5:10 am #904004

Nikko
Inactive Moderator

Hi Hanne,

Glad to hear that. Thanks for using Enfold! Have a nice day :)

Best regards,
Nikko
Author

Posts

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

The topic ‘Display a text when the mouse is over the image’ is closed to new replies.