Jump to content

CSS hover over image does not work pls help

Recommended Posts

Hi,

There is an "ongoing project" page on my website and I created 3 images and added a text on top, in the hopes that when a user hover over the image, a text will pop up. I was also hoping to create a hyperlink on the text so each image they click takes them to a gallery.

However, I can't seem to attach a link into the text box.

I also added in the code for the hover, which works when I hover while EDITING the webpage, but when I preview it, it just shows a static image.

Here is the pictures for reference:

This is what I want it to look like, the image are showing first unless u hover the image, then the text box will appear:

image.thumb.png.09f1aa2741f53115344ca9451d6fd274.png

However, when I go to preview, this is what it shows:

image.thumb.png.17e2038a6b32ae92638034ef6c74ab20.png

 

This is the code that I have put in so far:

@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1697400011904_19353 {
opacity: 0;
 transition: opacity 1s
}

#block-yui_3_17_2_1_1697400011904_19353:hover {
opacity: 1;
transition: opacity 1s
}
}@media only screen and (min-width: 640px){
#block-0621c99dd9acef85aed1 {
opacity: 0;
 transition: opacity 1s
}

#block-0621c99dd9acef85aed1:hover {
opacity: 1;
transition: opacity 1s
}
}
@media only screen and (min-width: 640px){
#block-4b94192b9870dd1aa56e {
opacity: 0;
 transition: opacity 1s
}

#block-4b94192b9870dd1aa56e:hover {
opacity: 1;
transition: opacity 1s
}

 

PLEASE HELP!!! 😞 this is driving me insane.

The password for the website is: brownie10

Website: 70-50design.ca/ongoing-projects

 

Also please help in terms of the textbox as i can't seem to hyperlink the gallery into it, nothing happens!!!

 

Thank you so much in advance.

Edited by sophdooley
wanted to add the website name.
Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

To make both image + overlay + text clickable, don't remove any code in your current code, add this to Custom CSS

/* Clickable */
.fe-block-yui_3_17_2_1_1697400011904_19353, .fe-block-0621c99dd9acef85aed1, .fe-block-4b94192b9870dd1aa56e {
	pointer-events: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.