I have an image I want to enlarge when I hover over it but I don't want to increase the area that the hover accepts. AKA, when I hover over it. I don't want to make it so you have to move your mouse farther away to leave the element.

I don't have the luxury of modifying the html or using javascript as I'm modifying a page's css.

These are the elements I'm working with.

<tbody class="list-item" style="">
    <tr class="list-table-data">
        <td class="data number"/>
        <td class="data image">
            <a class="link sort">
                <!--What I want to enlarge-->
                <img class="hover-info image">
            </a>
        </td>
    </tr>
</tbody>

I've tried numerous combinations of ::before and selectors to get it to work. Often times the result just leaves a flickering.

Is this possible to do with pure css?

A possible path to pursue is using position: relative; and z-index: -1; on .image, and keeping the :hover pseudo-class on .link. I've set up a demonstration here: http://codepen.io/anon/pen/BLwPEY

I'm taking some liberties with the styles, but simply for demonstrative purposes.

I'm not sure what you want the result to be (e.g. image stays centered, or exactly how the image size changes), but this may be a start. Note that the effect seems to be glitchy (for me, at least) when mousing out above or below - if you mouse out quickly but then pause on the edge of the image, the hover state seems to persist. Not sure why, and I've tried several different things to troubleshoot it with no success.

Anyway, it might be a place to start.

more