Jump to content

Add Additional Code Block IDs to CSS Code

Recommended Posts

Hello: Following is an example for CSS code targeting a block ID. I would like to add additional blocks to this code without having to duplicate this code over and over. Is there a way to add additional block IDs to this code to keep things simple? Thanks in advance:

 

@media only screen and (min-width: 640px){ 
#block-yui_3_17_2_1_1683733217068_10626 { 
opacity: 0; 
transition: opacity .5s 

Link to comment

Thank and I'm sorry for any trouble. I tried this and it doesn't work. Following is the complete code I have. There are three instances to create an effect, so maybe this is why it doesn't work. On the following please, if you hover over the image, a white tint and type will appear. I would like this effect for multiple images on the website - https://www.designsite.com/test-1

 

@media only screen and (min-width: 640px){ 

#block-yui_3_17_2_1_1683733217068_10626 { 

opacity: 0; 

transition: opacity .5s 

} 

 

#block-yui_3_17_2_1_1683733217068_10626:hover { 

opacity: 20; 

transition: opacity .5s 

} 

}

 

#block-yui_3_17_2_1_1683733217068_10626 {

background-color: rgba(255,255,255,0.675) !important;

}

Link to comment

I just tested the following code on two sites (to make sure I'm not crazy!), and it worked for me. When you say it didn't work, what do you mean? Is anything happening? Do you have any other CSS that could be conflicting?

#block-yui_3_17_2_1_1661275490273_1067987, #block-yui_3_17_2_1_1684607843271_36474, #block-e69b86acbe05251d6f53 {
	opacity: 0;
	transition: opacity .5s
}

#block-yui_3_17_2_1_1661275490273_1067987:hover, #block-yui_3_17_2_1_1684607843271_36474:hover, #block-e69b86acbe05251d6f53:hover {
	opacity: 20;
	transition: opacity .5s
}

#block-yui_3_17_2_1_1661275490273_1067987, #block-yui_3_17_2_1_1684607843271_36474, #block-e69b86acbe05251d6f53 {
	background-color: rgba(255,255,255,0.675) !important;
}

(Just for discussion: I like to use a mobile break point of 768px, or even 800. If 640 is working for you, great. I'm not trying to be pedantic. But it is the case that a lot of newer mobile/portrait-oriented screens are bigger and/or have greater pixel density than in the past, whereas very few landscape-oriented screens are under 7-800px wide.)

Link to comment

Thank you again. I just added a second block to my page and pasted in by two block IDS over yours, but it still doesn't work. When you hover over the top image there is no white tint that appears and the second image has a solid white background and the picture is not seen. Following is the code I'm using. Thank you very much again.

@media only screen and (min-width: 768px){ 

 

#block-yui_3_17_2_1_1683733217068_10626, #block-yui_3_17_2_1_1685104993166_5849 { 

opacity: 0; 

transition: opacity .5s 

} 

 

#block-yui_3_17_2_1_1683733217068_10626:hover, #block-yui_3_17_2_1_1685104993166_5849 { 

opacity: 20; 

transition: opacity .5s 

} 

}

 

#block-yui_3_17_2_1_1683733217068_10626 #block-yui_3_17_2_1_1685104993166_5849 {

background-color: rgba(255,255,255,0.675) !important;

}

 

Link to comment

Couple changes to the code.

1) You need to include ":hover" at the end of each block in the second section:

#block-yui_3_17_2_1_1683733217068_10626:hover, #block-yui_3_17_2_1_1685104993166_5849:hover {

2) You're missing a comma between the blocks in the third section, so the machine is reading that whole line as one ID. Of course, nothing on the page matches, so the background color is not being applied to anything.

I'm also wondering if we're at cross purposes. I'm looking at the code and seeing that it does what you've asked, where the syntax is correct. However, I suspect you are comparing what's happening on the screen to what you want to happen.

But before digging deeper into that, make those two changes and see if that does the trick. If not, please describe how you would like the image and text blocks to appear before and after hovering over them.

Link to comment

Thank you - with the following code, the effect works for the first image but not the second. The original image doesn't show and the white tint is 100%. Thanks again - it looks close. https://www.designsite.com/test-1

 

@media only screen and (min-width: 768px){ 

 

#block-yui_3_17_2_1_1683733217068_10626, #block-yui_3_17_2_1_1685104993166_5849 { 

opacity: 0; 

transition: opacity .5s 

} 

 

#block-yui_3_17_2_1_1683733217068_10626:hover, #block-yui_3_17_2_1_1685104993166_5849:hover

 { 

opacity: 20; 

transition: opacity .5s 

} 

}

 

#block-yui_3_17_2_1_1683733217068_10626, #block-yui_3_17_2_1_1685104993166_5849 {

background-color: rgba(255,255,255,0.675) !important;

}

Link to comment

We don't know that the image tint is 100%. 0.675 white tint applied a 100% white background just looks white. Given that the code works in the first case, it has to be working in the second. Something else is the problem. For example, there's nothing in these three blocks of code that suppresses the block with ID ending _5266. Note that we don't reference that ID at all.

Without being able to see the back end, and in the absence of any other clues, I would recommend deleting the second set of blocks and removing the text block ID from the code. Do a group select of the first blocks and duplicate them. Add the ID of the new text block to the code as above. Change the image and see if there is still an issue.

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.