简体   繁体   中英

Image hover effects

This is the fiddle i have created http://jsfiddle.net/pAQTn/

If you see the way it works now is on hover of the images the image enlarges in size by 20 percent and overlaps into the table.

How can i enlarge the image and at the same time enlarge the dimensions of my table. Here is my code.

<table border="1">
    <tr>
        <td>
            <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
        </td>
        <td>
            <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
        </td>
        <td>
            <img src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
        </td>
    </tr>
</table>

Here is the CSS

img:hover {
    border:1px solid #0000ff;
    width:120%;
    height:120%;
}

Used to % into px as like this

img:hover{
     border:1px solid #0000ff;
    width:120px;
    height:120px;
}

Demo

What you need to do is convert % to px and than use position: absolute; so that your cells wont move

Demo

img:hover{
    border:1px solid #0000ff;
    width:120px;
    height:120px;
    position: absolute;
}

As hinted at above, you can't use %. If you use % it will try to set the height and width to 120% of the container so then obviously can't resize the container otherwise it would then have to resize the image again and that would obviously go on infinitely.

If you wrap the image in another element, ie a div, it might do what you're looking for but I haven't got round to trying it.

Edit: the div didn't work!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM