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.