I'm having trouble figuring out how to implement this.
When hovering, a yellow square/background should appear with an offset similar to the one in the image below. I am utilizing bootstrap for this project. Any assistance or guidance would be greatly appreciated. Thank you
Learn how to create a mesmerizing animated hover effect using CSS transform:
.row {
background: transparent;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
position: relative;
}
.col-content::before {
transition: all 0.25s ease-in;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
content: '';
z-index: -1;
}
.col:hover .col-content::before {
background: orange;
transform: translateX(5px) translateY(5px);
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap documentation: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<div class="col-content">
1 of 2
</div>
</div>
<div class="col">
<div class="col-content">
2 of 2
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="col-content">
1 of 3
</div>
</div>
<div class="col">
<div class="col-content">
2 of 3
</div>
</div>
<div class="col">
<div class="col-content">
3 of 3
</div>
</div>
</div>
</div>If you're looking for a simple example, this might help. By using a before pseudo element that is absolutely positioned with a z-index of -1, along with containers sporting transparent backgrounds, you can achieve the desired outcome. Take a look at the demonstration below.
body {
margin: 0;
box-sizing: border-box;
}
.parent {
padding: 32px;
background-color: #dfdbe5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.row1,
.row2 {
width: calc(100vw - 64px);
position: relative;
display: flex;
background: #fff;
clear: both;
overflow: visible;
margin-left: 5px;
}
.row1::after,
.row2::after {
content: "";
display: table;
clear: both;
}
.row1 {
z-index: 1;
}
.row2 {
clear: left;
z-index: 0;
}
span[class^="container"] {
width: calc(100% - 64px / 3);
float: left;
position: relative;
padding: 10px;
border: 5px solid #6690ce;
margin-left: -5px;
margin-top: -5px;
}
span[class^="container"]:hover::before {
content: "";
background: #ffd100;
position: absolute;
padding: 5px;
top: 3px;
left: 3px;
width: 100%;
height: 100%;
z-index: -1;
}<section class="parent">
<div class="row1">
<span class="container1">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </span>
<span class="container2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</span>
<span class="container3">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </span>
<span class="container4">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </span>
</div>
<div class="row2">
<span class="container5">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </span>
<span class="container6">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </span>
<span class="container7">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</span>
</div>
</div>If you're looking for a way to create a hover effect with an offset, here's one possible implementation:
Check out this example on JSFiddle
If you can provide a code snippet, I can offer more assistance:
<div class="container">
<div class="heading">
<h1>Hello</h1>
</div>
</div>
.container{
width: 100px;
border: 1px solid red;
text-align: center;
}
.heading:hover {
width: 100px;
border: 1px solid yellow;
background-color: yellow;
position: relative;
margin: 4px 0;
left: 5px;
}
Currently, I am in the process of creating a straightforward nextjs API route (https://nextjs.org/docs/api-routes/introduction) that is linked to the Ethereum blockchain for executing a view function (which doesn't require any gas) from a smart contra ...
After utilizing jQuery Validate's convenient addClassRules function to impose a rule on all elements of a specific class, rather than relying on the attributes of their name, I encountered a roadblock when trying to do the same with the Angular wrappe ...
I have multiple buttons lined up in a row on my webpage. I want the button's color to change when I click on them. Below is a snippet of my code: $( "button.change" ).click(function() { $(this).toggleClass( "selected" ); }); .Button { font-fa ...
Looking to dynamically change a parameter value using JavaScript or jQuery. Here is an example URL: www.exampleurl.com/somepage?foo=test I have a function that can extract the value after the 'foo' parameter: function getParameterByName(name, ...
Angular offers the flexibility of creating independent Modules that can be reused in various parts of your application. Imagine having a module dedicated to managing lists, which you want to use across your entire application and populate in different ways ...
One key feature of my app is its ability to function both offline and online. However, I'm wondering how I can ensure that errors are still sent to my Sentry dashboard even when a user is offline. ...
Currently, I am attempting to utilize JSON with data retrieved from the server by implementing this PHP script: include("db_connect.php"); mysql_connect($host,$username,$password); @mysql_select_db($database) or die( "Unable to select database"); $resu ...
Hey there! I have a unique question for you. I've been trying to achieve a specific effect where two divs are stacked on top of each other, and the content of the lower div is only revealed in a certain area around the cursor. Is it possible to make o ...
I'm on the hunt for a specific example of the bootstrap 4 responsive navbar that transforms into a hamburger button only when the screen width is xs, but remains fully visible when wider. While there's a smooth working example for bootstrap 3, I ...
I am facing an issue with my Next.js single page app that utilizes static paths. When running it locally or exposing it directly from an AWS S3 distribution, everything works fine. However, once served via AWS CloudFront, accessing paths other than the roo ...
I am currently working on an app that fetches data from a movie API and returns 20 items from page 1. I am now looking to implement pagination so that users can click a button to view more items from subsequent pages. Below is my current API call: export ...
Currently, my AngularJS application is being served by a nodeJS server with Express. Everything runs smoothly when using the default angularJS routes (hashbangs); however, I am now attempting to enable html5 mode. To activate html5mode, I have implemented ...
My latest project involves opening Firefox with Selenium, extracting HAR files using BrowserMobProxy, and accessing JSON data from those files at timed intervals. Occasionally, however, I encounter a 511 Error: <!DOCTYPE html><html><head> ...
In my React project, I am working on displaying specific key values from a JSON response. For example, the fieldData {DMR_5_why_who_test: "test", why: test}. My goal is to only show the bolded or key values in my output. However, my current code is not a ...
I have a button in my navigation bar that I want to enhance with hover functionality. When a user hovers over the button, I want the text on the button to disappear and reveal three different clickable links inside the button. The actual button itself sh ...
I have a specific requirement that involves calling JSON data from one PHP page and displaying it on another PHP page. Can someone guide me on how to achieve this? Below is the JSON code that I need to retrieve: <?php include("Connect.php"); $Db = m ...
Is it possible to add a method to a method within a class? class MyClass { public foo(text: string): string { return text + ' FOO!' } // Looking for a way to dynamically add the method `bar` to `foo`. } const obj = new MyCl ...
When encountering the issue of browsers, specifically Internet Explorer in my case, failing to correctly implement complex CSS rules, is there a way to force the evaluation? For example: body[data-some-flag="3"] #someElement .someClass svg stop:first-chi ...
Here in this block of code, I have two dropdown lists: one for department and the other for section name. Based on the selected department, I dynamically change the options available for the section name dropdown list and then populate the values from both ...
I'm dealing with a peculiar issue regarding the display of borders in Chrome when individual cells are hidden within an HTML table. The borders disappear, despite being defined for the row and table elements. Does anyone have experience with this spec ...