I am looking to change the background color of a div when hovered over, based on the icon inside the same div.
Does anyone have any suggestions on how to achieve this easily using CSS, Bootstrap, or another method? If so, can you explain how?
For reference, here is an example link:
And if you prefer not to click the link, here is a picture: https://i.sstatic.net/xgfcU.gif
To achieve the desired effect, you can use the same image enlarged multiple times (~10), overlapped with position:absolute and a significant blur factor while managing overflow:
.card {
height: 250px;
width: 150px;
margin: 1rem;
display: inline-block;
border: 1px solid #eee;
border-radius: 6px;
}
.top-bar {
padding: 1rem;
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.top-bar img {
width: 36px;
z-index: 1;
position: relative;
}
.top-bar img.blur {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 512px;
filter: blur(51.2px);
opacity: .07;
}
.card:hover img.blur {
opacity: .42;
}<div class="card">
<div class="top-bar">
<img src="https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68">
<img class="blur" src="https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68">
</div>
</div>
<div class="card">
<div class="top-bar">
<img src="https://fastly.picsum.photos/id/102/4320/3240.jpg?hmac=ico2KysoswVG8E8r550V_afIWN963F6ygTVrqHeHeRc">
<img class="blur" src="https://fastly.picsum.photos/id/102/4320/3240.jpg?hmac=ico2KysoswVG8E8r550V_afIWN963F6ygTVrqHeHeRc">
</div>
</div>
<div class="card">
<div class="top-bar">
<img src="https://fastly.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0">
<img class="blur" src="https://fastly.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0">
</div>
</div>To simplify the process, consider using JavaScript to dynamically duplicate the <img> element and apply the .blur class to it (eliminating the need to manually add two images to each card).
Note that css-filters may not be fully supported across all browsers yet.
In the provided example, blurring is achieved using SVG filters instead of CSS filters which offers slightly better browser support.
Is there a way to apply a specific style exclusively to the very first element within a container, only if it is an h1, h2, or h3? However, if there are multiple headings of different levels on the same page, only the initial one should receive the designa ...
Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...
How can I achieve the table layout with a gap between columns, as shown in the design? Initially, I tried using border-collapse: separate but found it difficult to adjust borders in the tbody. So, I switched to collapse. Is this the right approach for crea ...
After starting the Freecodecamp course, I encountered a roadblock while working on one of the projects. Here is the current status of my project: https://codepen.io/otapadar/full/JjRaoex (I am aiming to replicate this website: https://codepen.io/freeCodeCa ...
Currently working on a NextJS App with SASS, but facing an issue where the global styles are not being applied. I have gone through the documentation, and installed the sass package. However, the problem lies in the fact that the globals.scss file is not ...
Is there a more efficient way to compile multiple css files from various sass files? I am currently using NodeJs to iterate through a directory containing different sass files with unique variables. My goal is to loop through all the files and generate co ...
My goal is to create a dynamic N-by-2 grid that adjusts its display based on run-time factors, resulting in an unknown number of rows and columns at design time. The grid could have different configurations like: 1 2 3 4 5 or 1 2 4 5 (missing 3) or ...
After verifying that my style is being successfully loaded, I have the following code implemented: input:focus { outline: none; } :focus { outline: none; } The purpose of this code was to eliminate the dotted rectangle that appears when clicking on objec ...
I am trying to display a text element only when a link is clicked in the mobile view. I suspect there might be a syntax error in this code, but I can't pinpoint where it is. $("#Link1").click( function() { if($(window).width() > 800 ) { $("#T ...
Currently I am attempting to replicate the "slideUp" and "slideDown" features in jQuery while utilizing a flexbox for display! jQuery.fn.toggleFlexbox = function() { var elm = $(this[0]); if(elm.css('display') === "none"){ elm.cs ...
On my website, students have the ability to create their own notes using a RichText editor where the content can be quite complex. I want to provide them with an option to download these notes as a PDF file. To achieve this, I am planning to use the "puppe ...
Looking to create a function that toggles classes on elements when specific links are clicked. For example, clicking on link 1 should add the "active" class to the red element, while clicking on link 2 should do the same for the pink element, and so forth. ...
A dropdown is in place to display certain content. <ul class="menus" style=""> <li>hey</li> </ul> Here is the corresponding CSS: .menus { width: 607px; background-color: white; border-bottom: solid 1px #9f9f9f; ...
Could you provide guidance on changing the color of fixed texts in specific sections of my portfolio website? Unfortunately, I can't share my lengthy code here, but would greatly appreciate it if you could illustrate with examples. Here's a refer ...
After creating a webpage, I realized that it wasn't responsive. Now I am in the process of recreating the page and have a dilemma on whether to use container or container-fluid. Based on some blogs I've read, container-fluid seems like a better o ...
Looking to incorporate Font Awesome 5.10.2 Duotone icons easily into any HTML element. The icon element relies on HTML attributes that should correspond to a specific icon, with the mapping controlled by the CSS author. <x pay></x> <!-- Th ...
Check out this website: The full page content is not displaying properly. The footer content seems to be hidden and only appears after refreshing multiple times. Can anyone diagnose if there might be an issue with the CSS or JavaScript? ...
After diligently following the courses on CodeAcademy (I know, kind of lame but it's a start), I finally feel confident in my ability to write my own HTML and CSS code. However, when I tried to do so using Sublime Text 3 and opened my HTML file, I not ...
I am working on creating a user-friendly sortable list using jQueryUI. When a user hovers over an item, I want to display options such as edit and delete. So far, this functionality is working well. However, the challenge I'm facing is making these o ...
Is there a method to achieve consistent and solid grid lines in C3 using CSS without specifying exact line values? For instance, consider C3's basic Grid Line example: var chart = c3.generate({ data: { columns: [ ['sampl ...