Menu
I'm almost afraid to ask this question because it seems like such an obvious one, but I just can't find a clear answer, so at the risk of tarnishing my non-existant reputation, here goes:
Is there a way to add an expanding CSS inner-border to an image on hover, without affecting the size of the image?
Here is my code as close as I can get on my own:
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.media_item_container img {
border: 3px solid #00205f;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
.media_item_container img:hover {
border: 10px solid #00205f;
}
.media_item_container a
{
font-weight:bold;
color:#000;
text-decoration:none;
font-size:13px;
}
.media_item_container a:hover
{
color:#fff;
}
HTML
<body bgcolor="#999999">
<div class="media_item_container">
<div class="media_item_text">
<a href="#"><img src="http://lorempixel.com/output/business-q-c-158-158-5.jpg" width="158" height="158" class="media_item_thumb" />
<h3>E-Brochure: <em>Printable e-brochure</em></h3>
DOWNLOAD »</a>
</div>
</div>
</body>
http://jsfiddle.net/aKedV/
Just trying to determine if there is any way to do it without the image scaling down as the border size increases (I basically understand why this is happening, just can't seem to come up with a solution on my own).
And I should clarify when I ask if there is a way to do this, I assume there must be some way to do this, but I would love to know if there is a relatively easy way.
Thanks so much!
611
asked Sep 05 '26 01:09
You can use outline instead of border.
outline:3px solid red;
outline-offset:-3px; //keeping it inside
and on hover
outline:10px solid red;
outline-offset:-10px;
Fiddle
88
Mate this is the solution that I came up with. Had to Change some HTML and CSS up but this is my shot at it. Hope this helps mate, Cheers
http://jsfiddle.net/aKedV/3/
HTML:
<body bgcolor="#999999">
<div class="media_item_container">
<div class="media_item_text">
<a href="#">
<div class="border" style="background: url(http://lorempixel.com/output/business-q-c-158-158-5.jpg);">
</div>
<h3>E-Brochure: <em>Printable e-brochure</em></h3>
DOWNLOAD »</a>
</div>
</div>
CSS:
.border {
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-ms-transition: all 500ms linear;
-kthtml-transition: all 500ms linear;
transition: all 500ms linear;
width: 158px;
height: 158px;
}
.border:hover {
-webkit-box-shadow: inset 0px 0px 2px 10px #00205f;
box-shadow: inset 0px 0px 2px 10px #00205f;
}
.media_item_container a
{
font-weight:bold;
color:#000;
text-decoration:none;
font-size:13px;
}
.media_item_container a:hover
{
color:#fff;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With