add border only to the image when i hover a thumbnail - html

Question

<div class='col-md-4'>
<div class="thumbnail">
<img src="media1/thumb3.jpg">
<div class="caption">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
t</span>ļ</span>
</div>
</div>
</div>
Here is my CSS
.thumbnail img{
width: 300px;
height: 300px;
border-radius: 150px;
}
.thumbnail {
border:none;
}
.thumbnail:hover {
background-color: #F2F3F4;
}
I would like to add border only to an image when i hover a thumbnail and not to the entire thumbnail (caption etc). Is there any way to do that using css ?

Answer 1

Give an id to the image say id="image"
And in the jquery use
<script>
$(document).ready(function(){
$('.thumbnail').mouseover(function(){
$('#image').css("border","2px solid black");
});});
$(document).ready(function(){
$('.thumbnail').mouseout(function(){
$('#image').css("border","0px");
});});
</script>
Do not forget to include the jquery script required to run jquery:-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

Answer 2

If you thumbnail div closes before img then you can do that. See this
On a CSS hover event, can I change another div's styling?

Answer 3

Just set this style:
.thumbnail:hover img {
border: solid 5px green;
margin: -5px;
}
The margin is to avoid the "changing position" effect
demo

Answer 4

If you want to change border on hover use :hover to the element in this case we will use this code
.thumbnail img:hover {
border: 3px solid #dddddd;
}
to control the changin position add a white border with same thickness to the normal state
.thumbnail img {
border: 3px solid #ffffff;
}
the complete code will be
.thumbnail img {
border: 3px solid #ffffff;
}
.thumbnail img:hover {
border: 3px solid #dddddd;
}