Does anyone know how to overlay a transparent image on hover using CSS in IE7 or IE8? I found an answer here, but it doesn't work for these browsers.
I'd like to keep it super-light, so I'm trying to avoid using JavaScript or anything similar. Any suggestions?
Thank you!
Upon reviewing the link you provided, I have formulated this particular solution based on it.
Here is the HTML code:
<div class="image">
<img src="xy.jpg" alt="" />
<img class="hoverimage" src="xy_hover.jpg" alt="" />
</div>
This is the corresponding CSS:
.image { position: relative; width: 184px; height: 219px; }
.hoverimage { position: absolute; top: 0; left: 0; display: none; }
.image:hover .hoverimage { display: block; }
The functionality should be consistent across all browsers, including IE8 and IE7. However, please note that this solution will not be compatible with IE6 due to its limitation on :hover pseudo-class support for specific elements such as links (<a>). To cater to IE6 users, consider changing the .image element to an <a> tag instead of a <div>, and apply display: block; accordingly.
As far as I know, this method still does not function properly on IE7/8, so unfortunately it may not address the question at hand.
However, I frequently find myself returning to this page whenever I need a reminder on how to achieve this using modern techniques, so I am saving the solution here for future reference.
To accomplish this, I have found success by nesting the img within a container or wrapper div since img elements do not support pseudo-classes like :after.
<div class="container"><img src="http://placekitten.com/240/320" alt="icanhaz"></div>
Subsequently, the CSS code is used to create a pseudo-element upon hover.
.container {
position: relative;
}
.container:hover:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5); /* Alternatively, images, gradients, etc can be used here */
}
For a demonstration, refer to this example
Typically, we recreate the image that requires a transparent overlay in the .png format. .Jpeg, on the other hand, is a flat image format that does not allow for transparency.
The next step involves something along these lines:
<div style="Background-Image:Url(BackgroundImage.Jpg);Width:500px;Height:500px" >
<div style="Background-Image:Url(OverlayImage.Png);Width:50%;Height:50%" >
...
</div>
</div>
This is my interpretation of your query.
Is there a way to display an array list from left to right with a div scroll, instead of top to bottom? I am having trouble achieving this. Here is my demo code for reference. HTML <div> <h2 class="ylet-primary-500 alignleft">Sessions</h ...
I am having trouble incorporating Angular Material's md-autocomplete into my angular application. I have already customized the CSS being used in my application, but when I add the Angular Material CSS, it messes up the entire page. Even when I tried ...
Hey there, I'm currently working on a Mail template and running into alignment issues with icons in certain versions of Outlook. It seems to be related to the Word rendering engine. Are there any alternative solutions available to ensure proper alignm ...
My aim with the following code snippet is to achieve two objectives: Apply a margin of 20 units to each card Display all four cards in a single row, allowing users to swipe horizontally Unfortunately, I have not been successful in achieving either of th ...
Here's the scenario: I have a jQuery script that loads DataTables, and I know how to set the "aoColumns" : "sWidth" parameter to fix the width of a specific column, which is working fine. However, my issue arises from having multiple tables with var ...
Just started using twitter-bootstrap and I'm trying to customize the navbar by removing borders and padding, adding a hover effect for links with a different background color, and setting margins of about 10px on the left and right. However, I'm ...
Being a rookie in this area, I am eager to learn how to extract specific content from a page using AJAX in JQuery. Currently, I have been able to fetch the data of a page and display it as text: $.ajax({ type: "POST", url: "myfile.html", su ...
Hello, I am currently delving into Material UI (ver.5.10.10) for the first time. My goal is to customize the styling of the TextField component in Material UI. Specifically, I want the TextField to always display its focused style, regardless of whether it ...
When I search online, most solutions only consider the viewport and/or the first parent container that is scrollable when trying to determine if a div is visible. However, I am wondering if there is a foolproof method to check if a div is truly visible t ...
How can I make the alert below toggle after 2 seconds? <div class="alert alert-info"> <a href="#" class="close" data-dismiss="alert">×</a> Data was saved. </div> ...
When applying CSS in Ionic, I encountered an issue with the background image causing the background to turn black. Without the image, everything looks fine. ion-content { --background: url("/assets/product_background.png") 0 0/100% 95% no-re ...
img tags seem to have unusual margins in Chrome, Edge, and Opera browsers, while Firefox displays them correctly. Queries What is causing these margins specifically in Chrome? The Devtool does not detect any margin properties. Is there a straightforward s ...
I am struggling to implement tab functionality in a class component. Even though I'm using this.state instead of useState, the tab switching is not working correctly. I have read the following articles but still can't figure it out: http ...
Having experience with React Native, I decided to give ReactJS a try. However, I'm struggling with styling my components because CSS is not my strong suit. To build a small web application, I am using the Ant Design UI framework. Currently, I have a ...
Is there a way to apply an animation to each letter in a word individually when hovering over the word? I want the animation to affect each letter with an increasing delay, rather than all at once. For example, if scaling each letter by 1.1 is the animatio ...
I have been developing a new project that requires a navbar to be positioned at the center of the page, at the top. The current HTML code I am using is as follows... <div class="navbar navbar-inverse navbar-fixed-top center"> <div class="con ...
I am using JQuery SlideUp and slideDown methods to toggle the visibility of panels. How can I load or display the first record's contact information as a default? Currently, it loads blank because I set the panel's display property to none: < ...
https://i.sstatic.net/PoNFX.pnghttps://i.sstatic.net/dEDAA.jpgMy website utilizes bootstrap tabs, but I've noticed that as I adjust the screen resolution, the tabs do not respond properly and end up positioned incorrectly. How can I ensure that the ta ...
Is there a way to change the border color of a label when a checkbox is checked using CSS selectors? Here's an example of what I have tried: label{ width:36px; height:36px; padding:9px; border:1px solid gray; border-radius:36px; } #check ...
I am looking to create a visual effect where one splat of paint merges with another splat of paint. I currently have 4 columns, each with a different splat background. Is there a way to make these backgrounds interact with each other to create a random sp ...