Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to make IG captions appear when hovering over images


LULU3

Question

  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

9 answers to this question

Recommended Posts

  • 0
On 7/5/2021 at 3:31 PM, LULU3 said:

Site URL: https://luluthelabel.com/

How do I make my IG captions appear when hovering over the IG feed images on the homepage of my site? 

Thanks in advance!

Screenshot 2021-07-05 at 09.27.36.png

Hi. Can you add some demo captions? We can check code easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 7/12/2021 at 4:28 AM, tuanphan said:

Also, do you need fix these issues?

Site URL – https://luluthelabel.com/

1. (Mobile – Our story) Increase text and image width?

https://luluthelabel.com/our-story

luluthelabel.com-01-min.png

2. (Mobile – terms and conditions) The size of text is small

https://luluthelabel.com/terms-and-conditions

luluthelabel.com-02-min.png

3. (Tablet – Header) Change links to 2 rows

https://luluthelabel.com/

luluthelabel.com-03-min.png

4. (Tablet – Contact us) Increase text width?

https://luluthelabel.com/contact-us

luluthelabel.com-04-min.png

Hi, yes please I need to fix the above. Please can you kindly advise? 

Thank you!

Link to comment
  • 0
On 8/5/2021 at 8:21 PM, LULU3 said:

Hi, yes please I need to fix the above. Please can you kindly advise? 

Thank you!

Hi. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* Our story width */
div#block-yui_3_17_2_1_1590273067719_15590 {
    width: 90% !important;
}
}
/* tablet form width */
@media screen and (max-width:900px) and (min-width:641px) {
div#page-5e10f93888456a2a6f400ba9 .span-12>.row:nth-child(3), div#page-5e10f93888456a2a6f400ba9 .span-12>.row:nth-child(4) {
.span-4:nth-child(2) {
    width: 70%;
}
.span-4:not(:nth-child(2)) {
    width: 15%;
}
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
5 hours ago, tuanphan said:

Hi. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* Our story width */
div#block-yui_3_17_2_1_1590273067719_15590 {
    width: 90% !important;
}
}
/* tablet form width */
@media screen and (max-width:900px) and (min-width:641px) {
div#page-5e10f93888456a2a6f400ba9 .span-12>.row:nth-child(3), div#page-5e10f93888456a2a6f400ba9 .span-12>.row:nth-child(4) {
.span-4:nth-child(2) {
    width: 70%;
}
.span-4:not(:nth-child(2)) {
    width: 15%;
}
}
}

 

Hi, thank you. It only worked for the first half and not the second section. I have attached photos, please can you kindly advise? 

Thanks. IMG_4245.thumb.PNG.1ee78decb937c7b13c6e9d9009e730c5.PNGIMG_4246.thumb.PNG.e07eb74aa54027485ee79709d0281cde.PNG

Link to comment
  • 0
23 hours ago, LULU3 said:

Hi, thank you. It only worked for the first half and not the second section. I have attached photos, please can you kindly advise? 

Thanks. 

replace this code

/* Mobile */
@media screen and (max-width:767px) {
/* Our story width */
div#block-yui_3_17_2_1_1590273067719_15590 {
    width: 90% !important;
}
}

with this

/* Mobile */
@media screen and (max-width:767px) {
/* Our story width */
div#page-5e10f87d95a27273eb6ba7c7 .image-block {
    width: 90% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 9/27/2021 at 4:36 AM, LULU3 said:

Hi @tuanphan. Please can you kindly advise how I can add demo captions? Thanks.

The block doesn't support adding caption/title/description??

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 9/28/2021 at 5:40 PM, LULU3 said:

No, it's an Instagram plug in block and it doesn't let me write over it?

Add this to Design > Custom CSS

/* Instagram text hover */
div#block-yui_3_17_2_1_1601657900030_9168 {
/* hover */
.slide a:before {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s;
}
	/* caption hover */
.slide a:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    text-align: center;
    z-index: 10000;
    opacity: 0;
}
.slide:hover a:before, .slide:hover a:after {
    opacity: 1;
}
/* Add caption 1 */
.slide:nth-child(1) a:after {
    content: "caption 1";
}
/* Add caption 2 */
.slide:nth-child(1) a:after {
    content: "caption 2";
}
/* Add caption 3 */
.slide:nth-child(3) a:after {
    content: "caption 3";
}
/* Add caption 1 */
.slide:nth-child(4) a:after {
    content: "caption 4";
}
}

image.thumb.png.0c3739c0a1509a0f3c6ab46a996b1e72.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...