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

Search the Community

Showing results for tags 'appear'.



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

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

Found 2 results

  1. Hi! I am trying to make my home page banner text appear from 40%-ish opacity to 100% opacity on top of the picture (picture will not be animated) when you open the website. I'd even settle for a hover animation to have the text appear over the image. Anyone know of some custom CSS to help me?
  2. How can I display a block/text when a user hovers or clicks on an image? I found a few good posts. Here and Here I also found external sources. Each place I went provided a solution similar to this: http://jsfiddle.net/p87g3fey/ Follow the link above to see it in action HTML <a id="thumbnail" href="#"> <img src="http://dummyimage.com/150x150/0066ff/fff"></a> <div id="title">filename.jpg</div> CSS #thumbnail { display: block; width: 150px; height: 150px; } #thumbnail:hover + #title { display: block; } #title { display: none; color: #ffffff; background-color: #000000; text-align: center; width: 130px; padding: 10px; } I don't understand what I'm doing wrong in my code though. Here's what I have: HTML <div class="sqs-block image-block sqs-block-image" data-block-type="5" id="block-yui_3_17_2_2_1428673541254_6455"> </div> <div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-yui_3_17_2_3_1429198468651_10272"><div class="sqs-block-content"> <p>I want this text to appear when the calendar image is hovered (and preferably clicked too)</p></div> CSS #block-yui_3_17_2_2_1428673541254_6455 { display: block !important; } #block-yui_3_17_2_2_1428673541254_6455:hover + #block-yui_3_17_2_3_1429198468651_10272 { display: block !important; } #block-yui_3_17_2_3_1429198468651_10272 { display: none; color: #ffffff; background-color: #000000; text-align: center; width: 130px; padding: 10px; } I literally just swapped out the selectors to match what I want done: When a user hovers over the calendar image on the right, I'd like text to appear on the left. I've tried other solutions, similar to this with no luck. Any ideas where I'm going wrong? Reason I'm selecting block-yui is that they indeed are static and work: https://answers.squarespace.com/questions/76450/how-to-select-just-1-image-on-a-page The page I'm working on is here: http://www.p2sk.ca/testing-grounds
×
×
  • Create New...