Reputation: 27
I can't make this working right. When the user have mouse ouver this div, how can i make this without having the image resizing?
HTML:
<div id="highlight" class="outerbox">
<div id="boxTitle">
Highlight
</div>
<img src="http://lookouch.com/www/assets/newImages/home/modulos/1.jpg"/>
</div>
CSS:
#boxTitle {
color: #ffffff;
background-color: #6000ff;
padding: 5px 5px 5px 5px;
position: absolute;
font-family: Montserrat;
font-size: 13px;
display: inline-block;
top: 0;
left: 0;
}
#highlight { width: 100%; display: inline-block; position: relative; }
#highlight img { width: 100%; height: 100%; }
#highlight:hover {
border: 2px solid #6000ff;
box-sizing: border-box;
overflow: hidden;
}
Upvotes: 0
Views: 43
Reputation: 550
You could use outline
instead of border
: jsfiddle
There's a downside though: border-radius
doesn't affect outline
like it does with border
.
Upvotes: 0
Reputation: 16841
Applying the border on hover reduces the inner size of the div, causing your width: 100%; height: 100%
image to reduce as well.
Give the div a transparent border before it's hovered, so it will not have any inner size change:
#highlight {
border: 2px solid transparent;
box-sizing: border-box;
width: 100%;
display: inline-block;
position: relative;
}
Upvotes: 0
Reputation: 208012
Three things:
border: 2px solid transparent;
. This will stop the jumping.vertical-align:top;
to #highlight img
to remove the gap under the image.box-sizing: border-box;
from #highlight:hover
. It's not needed here.Upvotes: 4