How can I generate a bounding box with CSS?

I am a newcomer to vue.js and I have a question about creating a bounding box for any element. This bounding box resembles a view box in svg. For example, I have created a checkbox like this one: checkbox

Below is the code to style 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;
    }

My goal is to create a 32px bounding box for this checkbox, similar to the viewbox in svg. You can refer to the icon grid and guidelines here. Let's assume the centerpoint is where the checkbox should be located, within a blue rectangle as the bounding box.

htmlcssvue.js

Answer №1

Alright, here is a method that should help point you in the right direction:

If you have a wrapper element, you can place your desired content inside and add an "overlay" element:

<div class="wrapper">
  <div class="overlay"></div>
  <div class="content">I am some content</div>
</div>

Using CSS alone, you can arrange the elements like a stack with the overlay on top using the position property. In my example, I utilized flex to improve positioning. I also set a fixed size for the wrapper to demonstrate the concept, but it could be omitted (in which case it would expand based on the child's 100% width... if the parent's width is specified, it would adjust to fill 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; /*The transparency is controlled by the last two hex digits (AA in this case)*/
}

div.content{
  background-color: red;
}

Upon hovering with the mouse, the overlay will become visible (thanks to the hover effect). However, if needed, you can manage this using a Vue property or similar technique to toggle the visibility of the overlay based on the property value.

You can view the outcome on this jsfiddle link: https://jsfiddle.net/r4tfumqe/3/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can we show pictures when a user clicks?

After creating a model for displaying images in a modal when clicked by the user, I encountered an issue. Whenever I try to access the images from the gallery within the modal content, it only displays a blank popup. I want the pictures from the image gall ...

javascripthtmlcssmodal-dialogshopify

Tips for personalizing react-show-more text length with Material-UI Icons

In my SharePoint Framework webpart using React, I am currently utilizing the show more text controller. However, I am interested in replacing the "Show More" and "Show Less" string links with the ExpandMore and ExpandLess Material UI icons. Is there a way ...

javascripthtmlcssreactjsmaterial-ui

Is it possible for me to create an HTML script that can transfer data from the script to a cell within Qubole?

Is it possible to create an HTML script that allows user interaction, pass the data back to a zeppelin cell, and trigger a rerun of the data? Thank you! Update: I have made some progress in rerunning the cell with an HTML click. The cell I want to rerun ...

htmlangularapache-zeppelinqubole

Solution for fixing the position of a div scrollbar under the browser scrollbar

When working on my web app, I faced an issue with a fixed div modal that takes up the entire screen. The problem is that the scrollbar for this modal is not visible, only the body scrollbar can be seen. It seems like the fixed div's scrollbar is posit ...

htmlcss

Adjust image width in column

After searching through various tutorials and Stack Overflow posts, I am still unable to properly resize my image in the right column. I have a layout with a left and right column - the left contains a menu and the right holds some content along with a ba ...

htmlcss

Ways to increase the values in a textbox

My task involves handling checkboxes that are populated with data from a database. The goal is to have certain checkboxes pre-checked based on the retrieved data, and if any are not checked, their values should be entered into a textbox. For instance, con ...

javascriptjqueryhtmlajax

"Triggering CSS changes with the click of a

I am developing a basic calendar application in PHP and I would like to dynamically change the style of the <td> block based on user interactions. Specifically, I want to implement a behavior where once the "menuclick" class is active, the other cl ...

phpjavascripthtmlcssclass

Hide Details tag only on mobile view

How can I easily close the default opened <details> tag on mobile? I am working with Wordpress. Any suggestions on how to achieve this? <details open> <summary>Details</summary> Something small enough to go unnoticed. </ ...

javascripthtmlcsswordpress

Transform JavaScript variables into CSS variables

Similar Post: Avoiding repeated constants in CSS I am currently working on a javascript file that aims to adjust my site's resolution based on the width and height of the viewport. While I have successfully retrieved these values using JavaScript ...

javascriptcss

Applying jQuery .animate() to elements without specifying position: absolute

My goal is to create a website where clicking on an image triggers a dropdown menu. The jQuery method I'm using is as follows: function main() { $('#arrow').click(function() { $('.hidden').animate({ top: &a ...

javascriptjqueryhtmlcss

When trying to import the store into Vue2 using the Composition API, an error occurred stating that [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any

I am currently utilizing vue version 2.6.14 along with the composition-api version 1.3.3 package in order to implement the composition api in my project. In my main.js file, I have the following setup: import Vue from 'vue' import VueCompositionA ...

vue.jsvuejs2statestorevue-composition-api

Tips for aligning text to the right and button to the left while ensuring responsive design with CSS

Trying to align text on the left and the button on the right with space between them in a responsive card design. The button has a background image added to it. Here is my attempted CSS, but the design is not yet fully responsive: .component { disp ...

htmlcss

Incorporate real-time calculations using JavaScript (jQuery) with variables including initialization in HTML code

As a newcomer to JavaScript, I am encountering an issue that I need help with: I would like to convert the value in the number box into the answer next to it without any changes to the value. This should also include the variables NP0, NP1, and DP0 from t ...

javascriptjqueryhtmlvariableslive

How can I display an HTML document by uploading it and rendering it in VueJs?

I am looking for a way to display HTML documents on the front end of my Vue.js application. My goal is to retrieve the HTML content from my database and render it seamlessly on the user interface. Any suggestions or guidance would be greatly appreciated. ...

htmlvue.js

What is the process by which photoswipe applies styles to blur an image upon clicking the share button?

If you want to see an example, check out this link: http://codepen.io/dimsemenov/pen/gbadPv By clicking on the Share button, you'll notice that it blurs the image (and everything else). Despite inspecting it closely, I still can't seem to figu ...

javascriptcssphotoswipe

Showcasing a graphical representation with the help of Highcharts

I am currently exploring JavaScript and trying to familiarize myself with interactive charts using the HighCharts library. Unfortunately, I have been facing some challenges in getting the graph to print correctly. Despite attempting various examples, none ...

javascripthtmlchartshighcharts

Passing down slots to child components in Vue allows for flexible and dynamic content

I am looking to create a reusable Data Table component using Vuetify. Some columns may require the use of v-slot to modify the data displayed within that specific column. For example, I have user roles stored as integers and want them to be shown as either ...

vue.js

Animate the smooth transition of a CSS element when it is displayed as a block using JQuery for a

I have implemented the collapsible sections code from W3 School successfully on my website. Now, I am trying to achieve a specific functionality where the "Open Section 1 Button" should slide down with a margin-top of 10px only if the first section "Open S ...

javascriptjquerycss

Utilize a combination of two distinct font styles in TCPDF

Within the following code snippet, I am utilizing two fonts: "fruit" and "fruit bold." However, when I apply both fonts, the entire page appears in bold text. What I actually want is to use them selectively - for example, displaying "hello" in the "fruit ...

phphtmlcsstcpdf

Reactive behavior is not present in Vuex getters when working with normalized data

After normalizing my data in a Vuex application, I encountered an issue with watching for changes in the data. Let me explain my setup using a simplified version. State: const state = { shapes: { collection: [1, 2, 3], data: { ...

vue.jsvuex