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

Text to appear on hover of image


dnissan

Question

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

Edited by edokken

Hello! I'm a web designer at Piila Web Design. Check us out - http://www.piila.ca, our website will be live end of Summer 2016. This Squarespace Answers account was made a while ago using my personal email address. My business address is davidnissan@piila.ca. Send me an email to either one - let's chat. What makes us different is our ridiculously low prices compared to the big wigs, while at the same time providing high-quality content. We're super honest about what we can offer and what we're charging you for, so you know exactly what to expect and where your dollar is going towards. We also provide small, piecemeal solutions. For example, if you just want that one customization on your website, it could cost as little as just 10 bucks. Nice. Cheers!

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

Out of curiosity, why is it bad code?

Hello! I'm a web designer at Piila Web Design. Check us out - http://www.piila.ca, our website will be live end of Summer 2016. This Squarespace Answers account was made a while ago using my personal email address. My business address is davidnissan@piila.ca. Send me an email to either one - let's chat. What makes us different is our ridiculously low prices compared to the big wigs, while at the same time providing high-quality content. We're super honest about what we can offer and what we're charging you for, so you know exactly what to expect and where your dollar is going towards. We also provide small, piecemeal solutions. For example, if you just want that one customization on your website, it could cost as little as just 10 bucks. Nice. Cheers!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...