CSS Grow on hover adds padding to the bottom of an image, how do I stop this from happening?

Tags: css,css3,css-transitions

Problem :


Whenever you scroll over an image and it grows to the desired effect there is a white border that grows along the bottom as well. Is there anyway to stop this from happening?

Also, I am new to using CSS3 across multiple browsers, how would I set it up to be moz/IE compatible?

Thank you


<div class="col4 grow"> <a href="#"><img src="http://www.placecage.com/200/300" width="100%"></a>

Solution :

Apply img this css property:

img {
    display: block;

Instead of giving to the tag, add a class to those img elements. that would be better.

Working Fiddle

    CSS Howto..

    Show first image and display none other image

    How to create spaces between elements in HTML/CSS

    css and basket: how to do an “always visible” basket?

    Ruby Command Line: How can I send the CTRL-C command via text in the command line?

    How can I let div inside bootstrap colum scrollable

    how to align the content of a box

    How can i position a background image to the top left and bottom right of a html element?

    How to apply css class to a based on respective $value in a of that row in a repeat region

    CSS background color show another color

    JavaScript -Change CSS color for 5 seconds - How to add easing effect?

    How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?

    How to get relative CSS from photoshop artboard?

    css how to set the tr that has a speicifc id

    How to Tie Events to CSS

    jQuery .animate() sets display:none, how to avoid?

    How to shrink wrap floating content?

    How to set only vertical padding?

    How to add a border bottom like the image?

    How to add space between inline-block elements?

    How can I convert AI to HTML & CSS to use in ASP.Net Application

    How to make a DIV section clickable?

    How can I make all table cell sizes the same width in css?

    How to make a ruler scale in HTML and CSS

    How to add the very last border on the sub menu items

    Implementing a select element in my form, but unsure how to grab user selection for a list

    Show jquery datepicker with HTML/CSS image

    CSS hover - parents are affected, too. How to avoid this?

    Angularjs - bind value from directive to ng-show/hide anywhere in document

    How to apply “-webkit” css rules using jquery .css

    How to change the Color of dynamically created divs on click event, who are having same class?