add border only to the image when i hover a thumbnail

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>
                        <a href="www.twitter.com" ><span class="sosa" style="font-size: 20px;">t</span></a><a href="www.linkedin.com" ><span class="sosa" style="font-size: 20px;">ļ</span></a>
                    </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 ?

Don't think this can be done only using CSS. JS/jQuery might be required. — Jayesh Chandrapal, Apr 12 '14 at 19:44

sss999 · Accepted Answer · 2014-04-12T20:01:28.693

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>

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

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?

edited May 23 '17 at 12:05

Community

1
1

answered Apr 12 '14 at 20:00

Nish

1,656
1
10
19

score 0 · Answer 3 · answered Apr 12 '14 at 21:02

0

Just set this style:

.thumbnail:hover img {
    border: solid 5px green;
    margin: -5px;
}

The margin is to avoid the "changing position" effect

demo

answered Apr 12 '14 at 21:02

vals

61,425
11
89
138

score 0 · Answer 4 · answered Apr 13 '14 at 04:11

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

add border only to the image when i hover a thumbnail

4 Answers4