Internet explorer CSS work around photos

[michaelsteven]

hello, having an issue. The CSS isn’t working in Internet Explorer. https://www.calvertvet.com/staff/

On chrome, the photos swap when clicked on. Here is the code being used. Is there a work around for Internet explorer?

.my-image-class20:hover {
content: url(https://www.calvertvet.com/wp-content/uploads/2018/05/katie_2.png);
z-index: 999;
max-width: 220px;
display: inline-block;

[jade]

Hi there,

In css, content applies to ::before & ::after pseudo selectors. As to why IE (and also FireFox) is not showing the image; it shouldn’t show the image as it’s not the right syntax, chrome tends to be flexible with css syntax most of the times.

Please try updating the code to something like:

.my-image-class3 {
    position: relative;
}

.my-image-class3:hover:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    display: inline-block;
    background: url(https://www.calvertvet.com/wp-content/uploads/2018/05/christine_2.png);
    width: 100%;
    height: 100%;
    background-size: contain;
}

Hope this helps.