CODEWITHSUNDEEP
htmlcss
user3629180
user3629180

Reputation: 27

Image resizing:hover

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?

Fiddle

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

Answers (3)

thykka
thykka

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

LcSalazar
LcSalazar

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;
}

http://jsfiddle.net/P9zaZ/2/

Upvotes: 0

j08691
j08691

Reputation: 208032

Three things:

  1. Give the highlight div a transparent border: border: 2px solid transparent;. This will stop the jumping.
  2. Add vertical-align:top; to #highlight img to remove the gap under the image.
  3. Remove box-sizing: border-box; from #highlight:hover. It's not needed here.

jsFiddle example

Upvotes: 4

Related Questions