How to create bounding box using css?

Question

I'm new in vue.js and I want to ask can I create bounding box to any element? This bounding box seems like view box in svg Example that I made this checkbox like this checkbox

And here are the code to make the box of the checkbox

/* checkbox aspect */
    [type="checkbox"]:not(:checked) + label:before,
    [type="checkbox"]:checked + label:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 1.4em;
        height: 1.4em;
        border: 1px solid #aaa;
        background: #FFF;
        border-radius: .2em;
        box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);
        -webkit-transition: all .275s;
                transition: all .275s;
    }

    /* checked mark aspect */
    [type="checkbox"]:not(:checked) + label:after,
    [type="checkbox"]:checked + label:after {
        content: '✕';
        position: absolute;
        top: .525em;
        left: .18em;
        font-size: 1.375em;
        color: #CB22ED;
        line-height: 0;
        -webkit-transition: all .2s;
                transition: all .2s;
    }

And what I want to do is create bounding box 32px for this checkbox, this bounding box should be similar with viewbox in svg You can see the icon grid and rules here. Let's assume the centerpoint is where the checkbox should be, and then they have bounding box (blue rectangle).

user_1592440 · Answer

Ok here is hopefully something that will at least set you on your way:

If you have a wrapper object, you can put the element of your choice inside and together an "overlay" element:


  
  I am a content

Now with CSS only you can position the contents inside like a stack where the overlay is the top-most element. To do so you can use the position property. I've used flex for the example just to position stuff better. I also gave the wrapper a fixed size to better illustrate the idea but in theory it could be left out (in which case it would grow as long as the page due to the child's 100% width... if the parent's width is set it would grow to 100% of it)

div.wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 300px;
  height: 300px;
}

div.overlay{
  position:absolute;
  width: 100%;
  height: 100%;
  
}

div.overlay:hover{
  background-color: #0000FFAA; /*Transparency is controlled by the last two hex-numbers (AA in this case)*/
}

div.content{
  background-color: red;
}

When you hover with the mouse it will show the overlay (due to the hover rule) but if you need you can control this with a Vue property or something and just hide/show the overlay depending on how the property is set.

You can see the result in this on this jsfiddle: https://jsfiddle.net/r4tfumqe/3/

How to create bounding box using css?

1 Answers