CODEWITHSUNDEEP
htmlcss
Saswat
Saswat

Reputation: 12836

Set hover effect on the img inside a div

I have a HTML in this fashion

<div class="image_area">
   <a href="<?php echo base_url();?>product-detail?product=<?php echo $pl['product_slug'];?>">
     <img src="<?php echo base_url().$pl['product_image'];?>" 
                                style="width:196px;min-height:250px; max-height:250px; border:1px solid #cfcfcf;"/>
   </a>
</div>

I want a hover effect on the image such that the border gets highlighted.

I have used this CSS code, but nothing happens

.image_area img :hover{ border: 1px solid #b6e2ff}

Upvotes: 1

Views: 1542

Answers (3)

Tomer Aronovsky
Tomer Aronovsky

Reputation: 135

two notes: 1. do not use style in your html code, add a new class with the following css:

width:196px;
min-height:250px; 
max-height:250px; 
border:1px solid #cfcfcf;

  1. you missed the ";" tag in the end of your line. try use this code:

    .image_area img:hover { border: 1px solid #b6e2ff; }

Upvotes: 0

Ashik Hassan
Ashik Hassan

Reputation: 1

No space between img and :hover
You can use

.image_area > a img:hover{border:1px solid #b6e2ff;}

Upvotes: 0

Zoran P.
Zoran P.

Reputation: 880

.image_area img:hover{ border: 1px solid #b6e2ff}

No space after img

And to avoid jump of image when hovered, do :

.image_area img{ border:1px solid transparent}

or you can even better do

.image_area a:hover img{ border: 1px solid #b6e2ff}

EDIT thanks to nevermind I didn't see this:

style="width:196px;min-height:250px; max-height:250px; border:1px solid #cfcfcf;"/>

remove border:1px solid #cfcfcf from there, and put it in .image_area img{ border:1px solid transparent} or .image_area a img{ border:1px solid transparent}

Upvotes: 1

Related Questions