Wordpress CSS悬停图像作为小部件？

Question

I'm currently trying to make a website for someone who's not very tech friendly and part of the website spec is that there are 8 images on the front page that are meant to have a rollover image that link to their corresponding categories. Now I know this would be pretty easy in css or javascript but I want the client to be able to re-arrange the order of these images using the widget functionality whilst also having the ability to replace an image, give it a new link and set the mouseover image without touching any of the code.

What i've tried so far is using the wordpress simple image plugin (which gives the widget and link functionality) along with the widget css class selector in an attempt to make the client able to select the relevant category class which would have a preset rollover image in the css but I don't think it can be accomplished this way.

any suggestions?

Answer 1

As per i understand, It can be done by simple html/css no need to use any plugin just you have to do some development and give the functionality to upload and update images with related links.

make one simple Div structure and give display property in css to get hover effect.
just make one structure and make it into a loop so client can move it any where in given area.
Simple structure as below.

HTML:
<div class="img_block">
    <img src="something.jpg" alt="" />
    <div class="hover_block">
        <a href="www.stackoverflow.com">
            <img src="another.jpg" alt="" />
        </a>
    </div>
</div>

Css:
.img_block {}
.hover_block{display:none; position:absolute; left:0; top:0;}
.hover_block img{width:100%; height:100%;}/* If require */
.img_block:hover .hover_block{display:block;}