Image Rollover Content

    Image rollovers are commonly applied to a background image. It works fine, but there are cases in which the image is an important part of a page's content, thus affecting your website's SEO.

    So, how can it be done? You must use the CSS selector 'content' for both regular state and on mouse over.

    It's recognized by Google Chrome and latest browser versions. You can use a background image fallback for visualization in older browsers, but your webpage's code will be read correctly in any browser.

That's the code that goes on your style page:

.rollover-image {

content: url("image1.jpg");

height: 400px;

}

.rollover-image:hover {

content: url("image2.jpg");

}

And on your html file:

<div class="rollover-image">

</div>

Run it on CodePen:

Images courtesy of Alexas_Fotos @ Pixabay