Technical Solution

[SOLVED] Mouse Over Image Not Getting Displayed for Gallery Image in Firefox Web Browser

Thomas.john | | 2 min read

This article will explain, how to display mouse over image for a gallery block image or on any content image in Firefox Web Browser.

While working on a project I required to display a mouse over the image, say 'View More' image for the last image in a gallery block. For the mouse hover in the image tag, I added a background image. See the code below.

HTML Code for Image

<ul>
    <li class="even first">
      <a href="/media-gallery">
        <img width="100" height="100" alt="" src="media-gallery-1.jpg">
      </a>
    </li>
    <li class="odd last">
      <a href="/media-gallery">
        <img width="100" height="100" alt="" src="media-gallery-2.jpg" >
      </a>
    </li>
  </ul>

CSS Code

ul li.last a img {
 position: relative;
 z-index: 10;
 opacity: 1;
 filter: alpha(opacity=100);
} 
ul li.last a img:hover {
 content: " ";
 z-index: 100;
 display: block;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: url("../images/view_more1.png");
 opacity: 0.3;
 filter: alpha(opacity=30);
 height: 100px;
 width: 100px;
}

Here the problem was that the mouse hover image was getting displayed on every browser except on Firefox Web Browser. When I inspected the element, I found that my CSS was called properly, but the background image was not coming up. I tried many options but the results were the same, in the Firefox Web Browser, the image was not getting displayed.

I even set the mouse hover image on a tag, but still, the background image was not coming up. It was because,, for the Firefox Web Browser, the main image always comes in front. So along with adding a mouse hover image on a tag, I added a display none for the image on hover and solved the issue. Check out the CSS below.

ul li.last a {
  position: relative;
  z-index: 10;
  opacity: 1;
  filter: alpha(opacity=100);
}
ul li.last a:hover {
  content: " ";
  z-index: 100;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../images/view_more1.png");
  opacity: 0.3;
  filter: alpha(opacity=30);
  height: 100px;
  width: 100px;
}
ul li.last a:hover img {
  display: none;
}
 

 

Related Topics