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

November 29, 2017 - 15:56

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 my requirement was to display a mouse over image, say 'View More' image for the last image in gallery block. For the mouse hover in 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 same, in the Firefox Web Browser, 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 mouse hover image on a tag, I added a display none for the image on hover and solved the issue. Checkout 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;
}

Get Drupal updates straight to your inbox

To prevent automated spam submissions leave this field empty.

Post your comments / questions