TAGS :Viewed: 6 - Published at: a few seconds ago

[ Issue with child width larger than parent width ]

Example

I'm having a hard time replicating a cool hover effect i found on codrops. I'm using the exact same html code she is using but there is something wrong with the <a href> elements being larger than its parent.

What am I doing wrong?

    &lt;div class="grid"&gt;
&lt;figure class="effect-romeo"&gt;
                    &lt;img src="http://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img05"/&gt;
                    &lt;figcaption&gt;
                        &lt;h2&gt;Wild &lt;span&gt;Romeo&lt;/span&gt;&lt;/h2&gt;
                        &lt;p&gt;Romeo never knows what he wants. He seemed to be very cross about something.&lt;/p&gt;
                        &lt;a href="#"&gt;View more&lt;/a&gt;
                    &lt;/figcaption&gt;           
                &lt;/figure&gt;&lt;figure class="effect-romeo"&gt;
                    &lt;img src="http://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img05"/&gt;
                    &lt;figcaption&gt;
                        &lt;h2&gt;Wild &lt;span&gt;Romeo&lt;/span&gt;&lt;/h2&gt;
                        &lt;p&gt;Romeo never knows what he wants. He seemed to be very cross about something.&lt;/p&gt;
                        &lt;a href="#"&gt;View more&lt;/a&gt;
                    &lt;/figcaption&gt;           
                &lt;/figure&gt;&lt;figure class="effect-romeo"&gt;
                    &lt;img src="http://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img05"/&gt;
                    &lt;figcaption&gt;
                        &lt;h2&gt;Wild &lt;span&gt;Romeo&lt;/span&gt;&lt;/h2&gt;
                        &lt;p&gt;Romeo never knows what he wants. He seemed to be very cross about something.&lt;/p&gt;
                        &lt;a href="#"&gt;View more&lt;/a&gt;
                    &lt;/figcaption&gt;           
                &lt;/figure&gt;
&lt;/div&gt;

Answer 1


It seems the issue is because of the class .grid figure figcaption padding:2em. Remove that and check the output!! Update your css like the below and check!!

The CSS:

.grid figure figcaption{
   //padding:2em;
}