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

Clickable image with caption on hover


lobot

Question

Site URL: http://lolascottart.com/test

Hello! I have no experience in CSS but I've been finding some code via web searches to customize my site.

My goal: I'd like to see a caption when hovering over an image, and be able to click on the image to visit a full gallery.

My issue: the code I have allows a capion on hover, but then the click through link stops working. I do not want just the text to be hyperlinked, but rather. the whole image should be clickable.

 

This is the page I am working on: http://lolascottart.com/test

This is code I have gotten from various google searches and youtube videos.

/* enable click */
body#collection-5fcaa11867453b32ebba7c40 figcaption.image-caption-wrapper {
    pointer-events: none;
}
//-- make the overlay transparent, and cover the image
.layout-caption-overlay-hover .image-caption-wrapper {background:transparent!important; min-height:100%; top:0!important;}

//--change the color of the text
.layout-caption-overlay-hover .image-caption-wrapper h1, .layout-caption-overlay-hover .image-caption-wrapper p{color:	#ffffff!important;}

.image-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sqs-block.image-block .image-caption-wrapper p{ font-size: 16px !important;}
.sqs-block-image .image-caption p {  font-size: 16px; font-weight: 100 !important;  font-style: normal;  color: #ffffff;  line-height: 0.00em;}
.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption a {
  display: block;
  padding: 100em;
  margin: -100em;
}

I appreciate any help. Thank you.

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0
On 1/26/2021 at 10:43 AM, lobot said:

Site URL: http://lolascottart.com/test

Hello! I have no experience in CSS but I've been finding some code via web searches to customize my site.

My goal: I'd like to see a caption when hovering over an image, and be able to click on the image to visit a full gallery.

My issue: the code I have allows a capion on hover, but then the click through link stops working. I do not want just the text to be hyperlinked, but rather. the whole image should be clickable.

 

This is the page I am working on: http://lolascottart.com/test

This is code I have gotten from various google searches and youtube videos.





/* enable click */
body#collection-5fcaa11867453b32ebba7c40 figcaption.image-caption-wrapper {
    pointer-events: none;
}
//-- make the overlay transparent, and cover the image
.layout-caption-overlay-hover .image-caption-wrapper {background:transparent!important; min-height:100%; top:0!important;}

//--change the color of the text
.layout-caption-overlay-hover .image-caption-wrapper h1, .layout-caption-overlay-hover .image-caption-wrapper p{color:	#ffffff!important;}

.image-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sqs-block.image-block .image-caption-wrapper p{ font-size: 16px !important;}
.sqs-block-image .image-caption p {  font-size: 16px; font-weight: 100 !important;  font-style: normal;  color: #ffffff;  line-height: 0.00em;}
.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption a {
  display: block;
  padding: 100em;
  margin: -100em;
}

I appreciate any help. Thank you.

I have the same exact question! My url is https://naomiokita.com/

So how do I add a custom css for a clickable image with captions on hover to the coding, I already have 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

Edited by naomiokita
Link to post
  • 0
On 4/18/2021 at 1:49 AM, naomiokita said:

I have the same exact question! My url is https://naomiokita.com/

So how do I add a custom css for a clickable image with captions on hover to the coding, I already have 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

Edit this code

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}

to this

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none; /* enable click */
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...