Inside border of image - html

Question

I have some problem with creating inside border of image. Tried to do it with border, outline and box-shadow but didn't get the result.
HTML:
<div class="item">
<img src="https://i.ytimg.com/vi/vsZDSXlHqI4/maxresdefault.jpg" alt="">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo blanditiis, distinctio. Odio eveniet vel nobis, consequuntur atque, dolorum debitis quae nesciunt esse quasi beatae, odit repudiandae dolore animi delectus ad nostrum, quas maiores hic labore?
Nisi, expedita sint, qui ullam itaque natus optio error accusantium placeat, culpa reiciendis, quos tempora.</p>
<button>Some action</button>
</div>
CSS:
div.item:hover {
//some code
img {
border-bottom: 5px solid #8cc34b;
margin-bottom: -5px;
}
}
My fiddle: JSFiddle
Here I got the outside border but I want to get inside border of image.
Thanks for help.

Answer 1

Wrap your img in div, and on hover use :after pseudo-element:
div.item {
min-height: 300px;
overflow: auto;
width: 300px;
background-color: white;
border: 2px solid #8cc34b;
border-radius: 5px;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.item img {
width: 100%;
display: block;
}
div.item p {
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
div.item button {
height: 35px;
width: 120px;
margin: 0 auto;
margin-bottom: 20px;
}
div.item .img-container {
position: relative;
}
div.item:hover h3 {
color: #8cc34b;
}
div.item:hover .img-container:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 5px;
width: 100%;
background-color: #8cc34b;
}
<div class="item">
<div class="img-container">
<img src="https://i.ytimg.com/vi/vsZDSXlHqI4/maxresdefault.jpg" alt="">
</div>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo blanditiis, distinctio. Odio eveniet vel nobis, consequuntur atque, dolorum debitis quae nesciunt esse quasi beatae, odit repudiandae dolore animi delectus ad nostrum, quas maiores hic labore?
Nisi, expedita sint, qui ullam itaque natus optio error accusantium placeat, culpa reiciendis, quos tempora.</p>
<button>Some action</button>
</div>
I also added display: block on img, because inline img creates extra whitespace below.

Answer 2

Another answer:
To create a color bar like in the image you liked to, I wrapped your image in a DIV with class x and added the following CSS (including a pseudo element):
img {
width: 100%;
}
.x {
display: block;
position: relative;
}
.x:before {
content: '';
position: absolute;
z-index: -1;
bottom: 7px;
left: 0;
right: 0;
height: 5px;
background-color: #8cc34b;
}
Instead of a hover rule for the image, I just make the x DIV visible by changing its z-index:
div.item:hover {
h3 {
color: #8cc34b;
}
.x:before {
z-index: 1;
}
}
Adjust the bottom setting as desired to move it up or down:
https://jsfiddle.net/9wLx9p0f/5/

Answer 3

We can simply do this with outline-offset property:
outline: 1px solid #fff;
outline-offset: -10px;
Try this in the div you wants, if it works for you.