Ok I am trying the CSS checkbox hack for my project but can't get it to work. Here is what I have. I would greatly appreciate any help. I am trying to get the buttons to change the color of the svg and was trying to follow this tutorial https://redstapler.co/change-image-color-pure-css/ but here https://www.abmartin.net/metal-roofing-panels/abm/color-visualizer is what I am trying to accomplish once I get the code to work for me. I'm a total newbie so I am trying to dissect each thing and look up the codes. I couldn't post the entire html because the svg code is too long. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> <style> .parent { position: relative; top: 0; left: 0; } .image1 { position: relative; top: 0; left: 0; border: 0 #000000; z-index: 1; } .image2 { position: absolute; top: 40px; left: 40px; border: 0px #000000; z-index: 30; color: red; } .image2 { mix-blend-mode: multiply; } label { display: inline-block; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; } label.red { background: red; } label.green { background: green; } label.blue { background: blue; } input[type="radio"] { visibility: hidden; } #red-radio:checked~.image2 .cls-1 { color: red; } #green-radio:checked~.image2 .cls-1 { color: green; } #blue-radio:checked~.color .image2 { color: blue; } input[type="radio"] { visibility: hidden; } </style> </head> <body> <p></p> <div class="parent"> <img class="image1" src="house2.png"> <div style="text-align: center;"><input name="color" id="red-radio" type="radio"><label for="red-radio" class="red"></label> <input name="color" id="green-radio" type="radio"><label for="green-radio" class="green"></label> <input name="color" id="blue-radio" type="radio"><label for="blue-radio" class="blue"></label> </div> Code (CSS):
Hi there BethLoudin, here is a basic example... HTML <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>Untitled document</title> <link rel="stylesheet" href="screen.css" media="screen"> </head> <body> <input name="color" id="r1" type="radio"> <input name="color" id="r2" type="radio"> <input name="color" id="r3" type="radio"> <input name="color" id="r4" type="radio"> <div id="label-container"> <label for="r1"></label> <label for="r2"></label> <label for="r3"></label> <label for="r4">hide</label> </div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 160" > <rect x="0" y="0" width="320" height="160"/> </svg> </body> </html> Code (markup): CSS body { background-color: #f9f9f9; font: normal 1em / 1.5em sans-serif; } input[name="color"] { position: absolute; top: -100%; left: -100%; } #label-container { display: flex; justify-content: center; } #label-container label { width: 3.125em; height: 3.125em; line-height: 3.125em; margin: 1em 0.25em; border: 1px solid #000; border-radius: 50%; box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.5); cursor: pointer; text-align: center; } #label-container label:nth-of-type(1) { background-color: #f00; } #label-container label:nth-of-type(2) { background-color: #008000; } #label-container label:nth-of-type(3) { background-color: #00f; } #label-container label:nth-of-type(4) { background-color: #fff; } svg { display: block; width: 100%; max-width: 40em; margin: auto; filter: drop-shadow(0.5em 0.5em 0.5em rgb(0 0 0 / 0.6)); } svg rect { fill: transparent; stroke: transparent; stroke-width: 1; transition: 1.5s ease-in-out; } #r1:checked ~ svg rect { stroke: #000; fill: #f00; } #r2:checked ~ svg rect { stroke: #000; fill: #008000; } #r3:checked ~ svg rect { stroke: #000; fill: #00f; } Code (markup): You can also view it in action here... Full Page View https://codepen.io/coothead/full/GRdzMmN coothead
Thank you so much I'm definitely going to keep trying and give this a try. I appreciate your help. Quick question when I put in the html to layer the roof over the house picture how do I get the buttons to go below the house because they keep getting layered underneath the house and roof?
In my example, simply like this... <input name="color" id="r1" type="radio"> <input name="color" id="r2" type="radio"> <input name="color" id="r3" type="radio"> <input name="color" id="r4" type="radio"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 160" > <rect x="0" y="0" width="320" height="160"/> </svg> <div id="label-container"> <label for="r1"></label> <label for="r2"></label> <label for="r3"></label> <label for="r4">hide</label> </div> Code (markup): coothead
Hi there BethLoudin, as a matter of interest, please note that the input elements must always precede the svg element. coothead
OK definitely noting that & I have a ton of notes lol but as of right now I just can't get it to work with my svg. I'm inserting my svg where you have the rect svg but it just isn't working for me for some reason. My svg does have a long code with path's but I gave it a class name and put it's name where you had the rect svg but for some reason it still doesn't work.
@denis bayly I'm having trouble layering my svg roof over my png house my svg roof want line up and resize.
OMG lol sorry. I am going to see if I can get this uploaded so I can let you see what I am doing lol. Thanks so much for all your help.