Remove image title when hovering using css?

Question

HTML code

<a href="#page5"><img id="imgsrc_4" src="http://140.123.105.162:4001/h/8427d242759e6584152dc293579042b3f9c377a5-254818-1200-1677-jpg/keystamp=1441340100-47d38eef85/002.jpg" title="002.jpg" style="margin: 0px; width: 1050px; height: 1467px;"></a>

There are many image HTML like above. I want to search for title (001.jpg,002.jpg,...) of the image and remove/hide it using CSS.

How can I do that?

Answer 1

A little late, but if someone is having same problem:

You can use pointer-events:none on that image, so the link will still work but title won't show on hover

Answer 2

You can be do it by using jquery. you need to add class and on basis of that class you have to hide using jquery here is demo..

$(".img_bx").hover(function(){
 
        // Get the current title
        var title = $(this).attr("title");
 
        // Store it in a temporary attribute
        $(this).attr("tmp_title", title);
 
        // Set the title to nothing so we don't see the tooltips
        $(this).attr("title","");
         

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#page5"><img class="img_bx" id="imgsrc_4" src="https://angularjs.org/img/angularconnect-conf.png" title="002.jpg" style="margin: 0px; width: 120px; height: 120px;"></a>