There are two diva - the parent (relative) and child (absolute).

The child has a height and width - 0 (invisible), a shadow and is positioned in the center of the parent.

By hover on the parent via JQ, the child is stretched to the width and height of the parent. All is good, but the shadow goes under the boundaries of the parent unit.

Broke the whole head, I can not think of how to show a shadow outside the parent.

Html:

<div class="main-social-3"> <div class="main-social-3-1"> <table> <tr> <td> <img class="img-responsive" src="/img/all-partners-1.jpg" alt="" /> </td> </tr> </table> </div> <p>Maxi card</p> <span>Партнер</span> <div class="main-social-3-hover"></div> </div>

CSS:

 .main-social-3 { width: 25%; float: left; text-align: center; padding-top: 25px; padding-bottom: 45px; position: relative; border: 1px solid blue; } .main-social-3-hover { -webkit-box-shadow: 0px 0px 29px 1px rgba(173,171,173,1); -moz-box-shadow: 0px 0px 29px 1px rgba(173,171,173,1); box-shadow: 0px 0px 29px 1px rgba(173,171,173,1); position: absolute; width: 0; height: 0; top: 50%; left: 50%; }

Jquery:

 $(".main-social-3").hover(function () { $(this).find(".main-social-3-hover").animate({ height: '100%', width: '100%', left: '0', top: '0' }) }, function () { $(this).find(".main-social-3-hover").animate({ height: '0', width: '0', left: '50%', top: '50%' }) })

I see the only way - to make the child on top of the parent, despite the fact that he is inside.

How to implement this?

enter image description here

  • Add your code so that you can understand what is wrong with your code - Sergey Glazirin
  • Show your code? - Andrey Fedorov
  • Yes, sorry, the code is attached. - Sergey

2 answers 2

You can add overflow: hidden; to the parent overflow: hidden;

 $(".main-social-3").hover(function() { $(this).find(".main-social-3-hover").animate({ height: '100%', width: '100%', left: '0', top: '0' }) }, function() { $(this).find(".main-social-3-hover").animate({ height: '0', width: '0', left: '50%', top: '50%' }) }) $(".main-social-2").hover(function() { $(this).find(".main-social-3-hover").animate({ height: '100%', width: '100%', left: '0', top: '0' }) }, function() { $(this).find(".main-social-3-hover").animate({ height: '0', width: '0', left: '50%', top: '50%' }) }) 
 .main-social-3 { width: 25%; float: left; text-align: center; padding-top: 25px; padding-bottom: 45px; position: relative; border: 1px solid blue; overflow: hidden; } .main-social-2 { width: 25%; float: left; text-align: center; padding-top: 25px; padding-bottom: 45px; position: relative; border: 1px solid blue; } .main-social-3-hover { -webkit-box-shadow: 0px 0px 29px 1px rgba(173, 171, 173, 1); -moz-box-shadow: 0px 0px 29px 1px rgba(173, 171, 173, 1); box-shadow: 0px 0px 29px 1px rgba(173, 171, 173, 1); position: absolute; width: 0; height: 0; top: 50%; left: 50%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main-social-3"> <div class="main-social-3-1"> <table> <tr> <td> <img class="img-responsive" src="/img/all-partners-1.jpg" alt="" /> </td> </tr> </table> </div> <p>Maxi card</p> <span>Без тени</span> <div class="main-social-3-hover"></div> </div> <div class="main-social-2"> <div class="main-social-3-1"> <table> <tr> <td> <img class="img-responsive" src="/img/all-partners-1.jpg" alt="" /> </td> </tr> </table> </div> <p>Maxi card</p> <span>С тенью</span> <div class="main-social-3-hover"></div> </div>

  • Nothing has changed. I played with overflo before. - Sergey
  • Added the second option, in the first there is no shadow from the child (added overflow: hidden), and in the second there is a shadow (there is no overflow: hidden). If you have previously tried to change this property, then maybe you have something influenced him yet. - Sergey Glazirin
  • one
    This can be done on css. - Qwertiy ♦
  • Thanks, somewhere in the code found overflow: hidden. Removed and everything is OK) - Sergey

No scripts needed:

 section { display: inline-block; width: 25%; border: 1px solid red; box-sizing: border-box; position: relative; } section:before { content: ""; display: inline-block; vertical-align: middle; padding-top: 100%; } section > div { display: inline-block; vertical-align: middle; width: 100%; text-align: center; } section:after { content: ""; position: absolute; left: 50%; top: 50%; right: 50%; bottom: 50%; z-index: -1; box-shadow: 0px 0px 29px 1px rgba(173, 171, 173, 1); transition: all 300ms linear; } section:hover:after { left: -1px; top: -1px; right: -1px; bottom: -1px; } 
 <section><div> Какой-то блок... </div></section><section><div> Второй... </div></section><section><div> Третий... </div></section><section><div> Четвёртый... </div></section>

PS: https://ru.stackoverflow.com/a/468550/178988