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
Here is the design mockup of what I am aiming for.
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;
}
Recently, I took on a coding challenge from Frontend Mentor (this one) and managed to complete it successfully. However, the grid I designed is not fully responsive. It only adapts correctly when the page width matches the media query specifications. The c ...
I have a unique dictionary structure displayed below. My goal is to populate it with values in a specific way. It all begins here var animals = { flying : {}, underground : {}, aquatic : {}, desert : {} }; To illustrat ...
After many attempts to resolve the issue with my website, I am turning to this community in hopes of finding a solution. The problem lies in the fact that while the ajax success function appears to be working and shows a status code of 200 in the network ...
Looking for help adding a static header image to a simple HTML page that contains two div tags: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"> <html> <head> ...
Currently, I find myself facing a challenge... We are using a WebView in a section of our app because we receive an HTML string from an API endpoint. The HTML styling is not optimized for mobile use, so we are attempting to make some stylistic changes to i ...
Is it possible to streamline these nested arrays for more efficient execution after all subscriptions have been completed? I believe there may be a solution involving the use of pipes, mergeMaps, concatMaps, etc. this.teams = [ { Assignments: [{Id: ...
Hey there! I'm trying to extract the URL value of an iframe on this website: I've checked the view page source but couldn't find the iframe. Looks like it's loaded after the page is fully loaded through JavaScript. Could it be that ...
One way to implement smooth scrolling to an anchor on page load is by using jQuery. Here's an example code snippet: $(function(){ $('html, body').animate({ scrollTop: $( $('#anchor1').attr('href') ).offset(). ...
I have a method defined as follows: private redirect(path: string): void { this.router.navigate([path]); } This method is called within another method like so: private onError(error: any): void { switch (error.status) { case 401: / ...
Within my useEffect, I have two states included in the dependencies array: const [currentTab, setCurrentTab] = useState('open'); const [searchParams, setSearchParams] = useState(''); useEffect(() => { if (condition) { // logi ...
The Challenge: Implement a hamburger menu to replace the navMenu on tablet and smaller screens After successfully compiling in VS code terminal, encountering an error in the browser: Error Message: TypeError: Cannot read properties of undefined (reading ...
When I receive a message from a WebSocket, the code snippet is triggered like this: ws.onmessage = (e) => { debugger if (e.data.startsWith('MESSAGE')) alert(JSON.stringify(e.data)) ImageReceived(e.data) c ...
Currently, I am working on creating a pagination using the NG-Bootstrap pagination component. However, I encountered an issue where I need to modify or specifically remove some CSS properties that are applied by default in the NG-Bootstrap library. Is ther ...
I'm experiencing an issue where event listener functions are not working on my browser (Chrome), but they work fine on CodePen. I've been troubleshooting this for about 2 hours, and I'm seeking some insights. Can anyone help? CodePen Link: ...
Is there a way to obtain the background height once the window has been resized? div { background-image: url(/images/somebackground.jpg); background-size: 100% 90%; background-repeat: no-repeat; width: 70%; background-size: contain; ...
I've been attempting to showcase a local JSON file on an HTML page. I stumbled upon some information online, but it's causing me quite a bit of confusion. Here is the JSON file I have: { "activities": [ { "name": "C:&bs ...
In my project, I am looking to implement an Ajax call that will update a specific child element within the DOM based on the element clicked. Here is an example of the HTML structure: <div class="divClass"> <p class="pClass1">1</p> &l ...
Is there a way to determine if the browser being used is Firefox or Chrome? I am looking to create an application that will only run on a specific browser registered by a user. To achieve this, my application needs to be able to identify which browser the ...
Currently in the process of transferring a WordPress website that utilizes Elementor. Successfully migrated both the code and database over. However, upon inspecting the page, I encountered a 404 error indicating that a css file associated with Elementor c ...
Presently, I am utilizing a Select component from @material-ui/core/Select, which contains only one option for simplification purposes, and the code snippet is as follows: <FormControl> <InputLabel id="demo-controlled-open-select-label">Test ...