Site URL: https://www.christopherwilhelmiphoto.com/reptiles-amphibians-insects

Hello,

In my website I have gallery pages showing photos. When hovering the cursor on top of each photo you will see the title of each photo (which is the name of the animal and the location it was photographed, both in one row). I am trying to have the name of the animal in the first row and the location it was photographed in the second row. I tried having the location as Description instead of Title but it doesn't work.

If you take a look at my website (https://www.christopherwilhelmiphoto.com/reptiles-amphibians-insects) you will see what I mean with the first and second photos. If you hover the cursor over the first photo (the yellow frog: name in Title and location in Description) you will only see its name, but if you click on it (and see the slideshow) you will see the location next to its name. In the second photo (green frog: name and location in Title) everything appears in the same row.

Can anyone please help me?

Thanks!

Chris

Hi,

Step 1. Edit title to this

Quote

Yellow Tree Frog <em>Tambopata NR, Peru</em>

Step 2. Let me know. We will test some code for image in gallery & slideshow.

1 hour ago, tuanphan said:

Hi,

Step 1. Edit title to this

Step 2. Let me know. We will test some code for image in gallery & slideshow.

Hi,

I changed the title of the image to what you suggested and deleted the description in the image. Now I see everything still in one line but the Location in italics.

After doing that, when I enter again to the image settings, the '<em>' part is gone (see screenshot).

Is there anything I can do to have more control over the text that shows up when hovering? Like displaying it in two rows, or making the font a bit bigger, or remove the bold of the Location?

Thanks!

Chris

Hello,

You can add

<br>

before

<em>

to display the title and description in a different row.

25 minutes ago, sorca_marian said:

Hello,

You can add

<br>

before

<em>

to display the title and description in a different row.

thank you! that solved my first question 🙂

do you know how i can change font, font size, and alignment??

Thanks!

Chris

Sure.

Add the code in the code injection of the page

<style>
#thumbList .thumb-title {
    font-size : 25px;
}
</style>

If you want different styles for the two text, wrap the first text in a

<span></span>

Then 

#thumbList .thumb-title span {
 /* CSS HERE FOR TITLE */
}

and 
 

#thumbList .thumb-title em {
 /* CSS HERE FOR LOCATION */
}

1 hour ago, sorca_marian said:

Sure.

Add the code in the code injection of the page

<style>
#thumbList .thumb-title {
    font-size : 25px;
}
</style>

If you want different styles for the two text, wrap the first text in a

<span></span>

Then 

#thumbList .thumb-title span {
 /* CSS HERE FOR TITLE */
}

and 
 

#thumbList .thumb-title em {
 /* CSS HERE FOR LOCATION */
}

 

Thank you this has been super helpful! I can work it out now. Main problem is I have like 100 photos so need to change each description one by one. Any idea if there is a faster way that applies to all images in a specific page?

A faster approach is to write some JavaScript but that would take me like 1-2 hours.

I can be hired on Upwork.

Please see my signature below.