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


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. @tuanphan I have used the below code you suggested in a previous forum to add transparency to images as part of the hover state, but this affects the text as well. Is there any way to get around that so that the text doesn't loose any opacity? figure.gallery-masonry-item.has-clickthrough:hover { opacity: 0.5; }
  2. @tuanphan thanks, that works perfectly! One more question. I would also like to add transparency to each image as part of the hover state. The below code seems to work, but only affects one image in the gallery. How do I apply it to all of the images? } .gallery-masonry:hover a img { opacity: 0.4!important; }
  3. Hi @tuanphan Below is the code I am currently using. The descriptions now appear on each gallery item in the correct font and position. How do I now create a hover effect? body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: granville, serif; font-size: 30px; color: black; text-align: center; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; top: 50%; width: 100%; bottom: 0; padding: 0% 0%; box-sizing: border-box; }
  4. @tuanphan This code (as per your link): body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { min-height: 60vh; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); }
  5. @tuanphan yes I have -see screenshot. This is just a test, wanted to see that it works before I upload my final files.
  6. @tuanphan I have tried adding the above code but it doesn't do anything to the gallery on the home page. URL: https://lanternfish-eagle-2flj.squarespace.com/ PW: 20244088
  7. Hi, I am working on Squarespace 7.1 and I am looking to create a gallery page with titles on each image as you hover over them through custom css. (I want to use a masonry gallery as my landing page that clicks through to each project). Alternatively, I would like to know if it's possible to covert a portfolio index page to masonry - the only available option at the moment is to have equally sized squares.
  • Create New...