I have this style in html:
<!-- hover style -->
<style type="text/css"> .imgBox { no-repeat; } .imgBox:hover { -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; } </style>
<!-- hover style end -->
Which makes a glowing effect over the image on mouse hover.
The images are presented in a table. Under each image there's a name. Like this:
I want the hover effect to apply only on the images, and exactly at their sizes (it's ok to assume all images are the same size). But i noticed that the hovering width stretches as the name's width (the row below). Like this:
Here's the table code:
css:
.researchers img{
border: 2px;
border-style: solid;
border-color: black;
}
html:
<div class="researchers">
<table>
<th colspan="4">
TITLE
</th>
<tr>
<td>
<a href="default1.aspx"><div class="imgBox" target="_top"><img src="noImage.jpg" alt=""></div></a>
</td>
<td>
<a href="default2.aspx"><div class="imgBox" target="_top"><img src="noImage.jpg" alt=""></div></a>
</td>
<td>
<a href="default3.aspx"><div class="imgBox" target="_top"><img src="noImage.jpg" alt=""></div></a>
</td>
<td>
<a href="default4.aspx"><div class="imgBox" target="_top"><img src="noImage.jpg" alt=""></div></a>
</td>
</tr>
<tr>
<td>
Long Name
</td>
<td>
name
</td>
<td>
name
</td>
<td>
name
</td>
</tr>
</table>
</div>
(You don't need the prefixed box-shadow
anymore. They all understand the unprefixed.)
Apply the box shadow to the img
instead of the box:
.imgBox:hover img {
box-shadow: 0 0 10px #111;
}
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.