1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Trying something different but need help

Discussion in 'HTML & Website Design' started by BethLoudin, Oct 12, 2022.

0
  1. #1
    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):

     
    Last edited: Oct 12, 2022
    BethLoudin, Oct 12, 2022 IP
  2. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #2
    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
     
    Last edited: Oct 13, 2022
    denis bayly, Oct 13, 2022 IP
  3. BethLoudin

    BethLoudin Peon

    Messages:
    10
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #3
    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?
     
    BethLoudin, Oct 13, 2022 IP
  4. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #4

    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
     
    denis bayly, Oct 13, 2022 IP
  5. BethLoudin

    BethLoudin Peon

    Messages:
    10
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #5
    O ok thanks so much.
     
    BethLoudin, Oct 13, 2022 IP
  6. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #6
    Hi there BethLoudin,

    as a matter of interest, please note that the input elements
    must always precede the svg element.
    ​

    coothead
     
    denis bayly, Oct 13, 2022 IP
  7. BethLoudin

    BethLoudin Peon

    Messages:
    10
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #7
    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.
     
    BethLoudin, Oct 13, 2022 IP
  8. BethLoudin

    BethLoudin Peon

    Messages:
    10
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #9
    @denis bayly I'm having trouble layering my svg roof over my png house my svg roof want line up and resize.
     
    BethLoudin, Oct 13, 2022 IP
  9. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #9

    I don't believe that we've had the pleasure of seeing your svg. :D
    ​

    coothead
     
    denis bayly, Oct 14, 2022 IP
  10. BethLoudin

    BethLoudin Peon

    Messages:
    10
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #10
    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.
     
    BethLoudin, Oct 15, 2022 IP