I am building a webpage for my startup, but I am having trouble using the mouse over / hover event. It regards this page: www.innomotion-media.com

As you can see, hovering with your mouse over one of the three images will change the image to a colored one. This is working fine, however: when opening said link on a smartphone (at least on my Samsung S8 with Google Chrome) the images are shown twice. The black and white one and the colored one. So there are 6 images instead of only the wanted two.

I tried opening the page on my smartphone with Firefox and this showed correctly. Also I tried with Internet Explorer on my computer and it also worked.

This is the HTML that I used:

    <div class="container">

        <div align="center">
        <a href="./page_construction.html">
            <div class="card">          
                <img src="./img/index_left_bw.png" alt="Card Back">             
                <img src="./img/index_left.png" class="img-top" alt="Card Front">           
            </div>
        </a>
        </div>

        <div align="center">
        <a href="./page_appDev.html">
            <div class="card">          
                <img src="./img/index_center_bw.png" alt="Card Back">               
                <img src="./img/index_center.png" class="img-top" alt="Card Front">         
            </div>
        </a>
        </div>

        <div align="center">
        <a href="./page_recording.html">
            <div class="card">          
                <img src="./img/index_right_bw.png" alt="Card Back">                
                <img src="./img/index_right.png" class="img-top" alt="Card Front">          
            </div>
        </a>
        </div>  
    </div>

And this is the corresponding CSS:;

/*font face*/

  @font-face {
      font-family: "Baiti";
      src: url("./fonts/baiti.ttf");
    }
    body { font-family: "Baiti", serif }

.container{
    width:900px;
    margin:auto;
}

.card {

    position: relative;

    display: inline-block;

}

.card .img-top {

    display: none;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 99;

}

.card:hover .img-top {

    display: inline;

}

Is there maybe a better way of doing this, so that it will look the same on all browsers, smartphone or not?

I hope you can help me, this is my first time asking anything :)

Thank you!

1 Answers

1
Martin On Best Solutions

Instead of using overlaid images, you could use a grayscale filter in CSS on a colour image which is removed on hover.

Remove the second image from the HTML:

<div align="center">
    <a href="./page_construction.html">
        <div class="card">          
            <img src="./img/index_left.png" class="img-top" alt="Card Front">           
        </div>
    </a>
</div>

Remove the exsting CSS for .img-top and replace with this:

.card .img-top {
    filter: grayscale(100%);
}

.card .img-top:hover {
    filter: none;
}

The colour image will be shown but with a grayscale filter on it, so that the image is black and white. When you hover over it, the filter is removed and the image is shown in normal colour.

This removes the need to have two images with one positioned absolutely.