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

Search the Community

Showing results for tags 'hovereffect'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers πŸ‡«πŸ‡·'s Topics
  • France Designers πŸ‡«πŸ‡·'s Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges

Found 9 results

  1. Site URL: https://okra-swordfish-w2kf.squarespace.com/ I'm trying to enable image descriptions to appear atop the center of each image upon hover. While I've managed to create a nice ease in/ out effect with making the image slightly more white (essentially so the text can stand out), I can't seem to get description text to appear on each image with the hover. I've gone through a number of threads, but for some reason every version of code I've found isn't working for me. To note, I need to maintain clickthrough abilities, as each image links to its own respective project page I'm working with a gallery block, simple grid on Squarespace 7.1. Here's the code I have so far: //IMAGE BACKGROUND ON HOVER figure.gallery-grid-item .gallery-grid-item-wrapper:before { background-color: white; content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all 0.5s; } figure.gallery-grid-item:hover .gallery-grid-item-wrapper:before { opacity: 35%; transition: all 0.5s; } Do I add something to this specific segment of code, or is there a different block of code I should add for the descriptions to also appear on the hover? I'm new to CSS and would be so grateful for some insight! With gratitude! Alex
  2. Site URL: https://www.kimsedgwick.co.za/ Looking to add hover text and an opaque white block on my index page - collection gallery. As it stands, the text is currently over the image permanently, I want this to only appear when you hover over the image. There is currently a faint opacity that appears when the image is hovered over, I want to decrease the opacity so It becomes a bit more white and you see less of the image. See images attached for reference. My current site and what I am looking for, the images attached of what I am looking for has a solid white block and the text appears when hovered over but I would prefer mine to be less opaque than it is now but not solid . Thanks so much!
  3. Site URL: https://bumblebee-drum-w3fz.squarespace.com/interiordesign hi, I used the tutorial from Brandon for the hover effects: Everything is perfect, except the hover effect. I have an opacity effect and I would like grayscale 100% . I have this CSS: figure.gallery-grid-item.has-clickthrough:hover img { filter: grayscale (100%); } But it is not working. I also tried: .gallery-grid-item img:hover{filter:grayscale(100%)} Can you help me ? Thank you !
  4. Site URL: https://pelican-chiton-xwy4.squarespace.com/shop Hello, I'd like to remove the default fade hover effect on my Shop products so I have a frame-to-frame transition (as on the Homepage). Is there any way I could do this? Thanks
  5. I am using code that is not at all on mobile devices - i understand from reading other posts that ":hover" doesnt function on mobile. Im looking for an alternative for two sets of code that I have applied to the same image - hoping it will work on both mobile and desktop. On mobile, the images are requiering multiple clicks This first one inverts the image (This one is targeted to a specific blockπŸ™‚ #block-yui_3_17_2_1_1576941445838_49178:hover { filter: invert(100%); } This second one causes the image to increase in size (this one is NOT targeted to a specific block): a img.thumb-image { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } a img.thumb-image:hover, a img.thumb-image:active { -webkit-transform: scale(1.1); transform: scale(1.1); } It works great on desktop, but I'm wondering how can it be adjusted for mobile?
  6. Hi there, I have added some code to get the hover effect (overlay + Poster: Title/Subtitle ) on images (see screenshot attached). /* Hover Effect Images */ .sqs-block-image:hover { brightness: 100%; transition: .6s; cursor: pointer;} .sqs-block-image:hover img { filter: brightness(0.7); transition: .3s;} .sqs-block-image:not(:hover) .image-card-wrapper { display:none;} Unfortunately it started behaving weirdly - the hover just works on all images now, rather than on only https://www.aeliaandthecamera.com/branding and text is not displayed while hovering over. Any advices how to make it work properly are highly appreciated πŸ™‚ Many thanks πŸ™‚ A.
  7. Using the Brine template and have alternate image on hover functioning on the product pages. I would like to replicate that alternate image on hover function on the quick view on the home page. I have the page set up with the product page inserted, but it looks like the hover function with need a custom code. I didn't find a solution in a search. Any help would be greatly appreciated! Thank you!
  8. Hi! Is there a way to create a similar style effect: https://nicolainiermann.com/ U want to randomly place text on my homepage en the background has to change when I hover over it! Thanks in advance! Kamiel
  9. The pages I would like rollover effects on are: BrysonPrice.com/music – rollover effect on album art BrysonPrice.com/contact – rollover effect under β€œConnect” images Thanks for your help!
Γ—
Γ—
  • Create New...