Is there a way to set the background with opacity without affecting the opacity of the border line? I have tried different solutions but none seem to work.
<div class="selected">
<img
src="../assets/img/image-product-1-thumbnail.jpg"
alt="product-1-thumbnail"
/>
</div>
img {
width: 100%;
max-width: 5rem;
height: auto;
border-radius: 10%;
}
.selected {
background-color: red;
img {
border: 2px solid red;
}
}
const images = document.querySelectorAll('.thumbnail');
images.forEach(img => {
img.addEventListener("mouseover", ()=> {
img.classList.add('blur')
img.parentElement.style.outline = "2px solid hsl(26, 100%, 55%)";
img.parentElement.style.borderRadius = "12px";
})
img.addEventListener("mouseout", ()=> {
img.classList.remove('blur')
img.parentElement.style.outline = "";
})
}); .left-section-bottom{
display: flex;
width: 80%;
margin: 32px auto;
gap: 40px;
}
.left-section-bottom img{
border-radius: 12px;
}
.thumbnail.blur{
opacity: 0.4;
cursor: pointer;
}
.thumbnail-div{
display: flex;
}<div class="left-section-bottom">
<div class="thumbnail-div"><img class="thumbnail" src="images/image-product-1-thumbnail.jpg" alt=""></div>
<div class="thumbnail-div"><img class="thumbnail" src="images/image-product-1-thumbnail.jpg" alt=""></div>
<div class="thumbnail-div"><img class="thumbnail" src="images/image-product-1-thumbnail.jpg" alt=""></div>
<div class="thumbnail-div"><img class="thumbnail" src="images/image-product-1-thumbnail.jpg" alt=""></div>
</div>I was searching for a solution to the same problem and after some trial and error, I managed to get it working. The initial challenge is linked here:
With four images, iterate through them individually using querySelectorAll instead of querySelector.
Make use of forEach() to loop through your thumbnail images.
As suggested by Kingsly, wrap your images in a div to apply styles to the div rather than the blurred images themselves.
If you add your images, this code snippet should work seamlessly.
To create a visually appealing image display, enclose the image within a div element of your preferred size. Customize the appearance by adding a border and setting a border-radius for the div. Additionally, apply opacity to the img element.
IMAGE CREDIT:
.img-container {
width: 200px;
height: 150px;
border: 2px solid red;
border-radius: 10%;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
opacity: .7;
}
.selected {
//background-color: red;
}
img {
}<div class="selected">
<div class="img-container">
<img
src="https://images.pexels.com/photos/1000445/pexels-photo-1000445.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="product-1-thumbnail"
/>
</div>
</div>On my HTML page, I have some hidden DIVs that can still be viewed in the page source. I want to ensure that these DIVs are not visible to users when they inspect the page source. Is there a way to achieve this using Javascript or another solution? ...
What might be causing the message list to display horizontally in the admin dashboard, but vertically on other pages? .user-list{ display:inline; } .users header, .users-list a{ display: flex; align-items: center; padding-bottom: 20px; border-bottom: 1px s ...
Our team is looking to incorporate Material UI Next components into our application, where we already use styled components with SASS. Our current approach involves using webpack and a raw-loader to import the generated CSS and apply styles in this manner: ...
My attempts to remove the border-right for the last column and border-bottom from the last row of bootstrap columns using nth-child elements have been unsuccessful. I have provided the js fiddle code below: .col-xs-3 p:nth-child(-n+3) { border-botto ...
I am facing a challenge with a table on my webpage where values are added through a textbox in a popup modal. However, when I try to add the string ); to the textbox, it triggers a popup instead of being displayed innocuously in its original format on the ...
Hello everyone, I'm a newcomer to this website and the world of web development in general. Currently, I am embarking on a project that requires some assistance. Please bear with me as I navigate through my novice coding skills which may be messy and ...
I have a list on my webpage where each item is displayed with a CSS3 rotate animation. After the animation finishes, I want to set a background image with a FadeIn effect. To achieve this, I created a "addbg" class for the ul element like so: ul.addbg{ ...
I have a list with random sorting, set to a specific width and height. What I want to achieve is when I click on an item in the list, it overflows beyond the scrollbar without activating the item itself. Here's an example of how the normal scrollbar ...
Looking to create a Product landing page with a two-column layout in grid view, limiting rows to 4. Is there a setting in the backend or can I tweak the catalog.xml for this effect? Curious if the pager and sorter can be customized to fit the same style a ...
I have a JavaScript mapping component that includes a map and I want to customize the color based on user preferences set in an Angular 1.5 'as' controller. Here is an example of my controller code: app.controller('PreferenceController&apo ...
Here is some sample dummy HTML code: <table> <body> <tr> <td id="cell" style="height: 1000px; width: 200px;"></td> </tr> </body> </table> I am looking to attach a click event ...
I am working on a WordPress plugin that displays search results. Here is the PHP code for the results: <?php /** * Search & Filter Pro * * Sample Results Template * * @package Search_Filter * @author Ross Morsali * @link http://w ...
I am currently working on a website where I need to create a table with fixed width td tags, rather than the entire table having a fixed width. This is necessary because I will be dynamically showing and hiding columns using jQuery, and also using a jQuery ...
Currently, I am working on developing a traditional sidebar layout for the left portion of my template using Bootstrap 4. Here is the code snippet I have implemented: <nav class="team-left-column col-12 col-md-4 col-lg-2" style="background-color: ...
I am new to the world of web development Currently, I'm facing an issue with my lightbox feature. I want to navigate between images by using ev.target.nextElementSibling and ev.target.prevElementSibling when clicking on the next/previous arrow.png ic ...
This is a query I had regarding the use of the sub tag: Using <sub> tag and preserve line-height To achieve the subscript effect, I tried using position: relative; along with a smaller font size. However, I noticed that this solution is not achievi ...
I am currently working on a code that expands and centers a div when hovered upon using the following script: $(document).ready(function(){ //animation on hover $('#sliding_grid li').hover(function() { ...
I'm facing an issue where I can't seem to get two h2 elements with top margin set and placed inside divs floating left to line up properly. Any help would be appreciated. <html> <head></head> <style> h2{ ...
When using material UI, the progressbar demo includes lines of JSX code like this: '& > * + *': { marginTop: theme.spacing(2), }, Can you explain what the selector '& > * + *' represents in this context? ...
Recently, I came across an image scroller on Mashable that caught my eye and I am interested in incorporating it into a new project: I saw it in action on the website, but I am curious about what it actually is. Does anyone know if it is available as a W ...