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

lobot

Member
  • Posts

    2
  • Joined

  • Last visited

  1. 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.
  2. Hello! I have a similar issue. I have no experience in CSS but I've been finding some code via google and youtube. I am trying to make my image blocks have a caption when hovering over, and users should be able to click the image to go to a specific page on my website. Unfortunately the code is not permitting click through. What should I do? This is the page I am working on: http://lolascottart.com/test /* 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; }
×
×
  • Create New...