CSS Lifted Corners in Foundation 6

Question

I have been trying to use CSS to create a lifted corner effect for an image on a Foundation 6 website (fluid), and have been unable to get it functioning. I always end up with absolutely nothing. Changing the z-index property does nothing. I assume something in foundation may be interfering, but I am new to Foundation.

Ideally I would like to have a single class I could apply to any image of any size.

CSS

.shadowbox {
  position: relative;
}
.shadowbox:before, .shadowbox:after {
  z-index: -1;
  position: absolute;
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.shadowbox:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

HTML:

<div class="medium-3 columns">
    <div class="feature-section-column" data-equalizer-watch>
        <div class="shadowbox">
            <img src="assets/img/feature_img/stem_design.jpg" />
        </div>
        <p>STEM learning is everywhere and we help design and advance it. Our work includes the comprehensive design of STEM schools and the transformation of existing ones, strategic planning support to school districts and networks, and the creation of STEM learning experiences that range from curriculum-embedded capstones to aligning in- and out-of-school learning in the community.</p>
        </div>
</div>

score 0 · Accepted Answer · answered Dec 11 '18 at 05:58

You have a number of issues. First, the main column is so big it pushes the :before and :after off the page.

I didn't have your image. But the text is probably should be in the .shadowbox as well.

We will want to limit the .shadowbox size down a bit so :After and :before (with width 50%) can fit. I reduced their widths.

<div class="medium-3 columns">
    <div class="feature-section-column" data-equalizer-watch>
        <div class="shadowbox">


        <p>STEM learning is everywhere and we help design and advance it. Our work includes the comprehensive design of STEM schools and the transformation of existing ones, strategic planning support to school districts and networks, and the creation of STEM learning experiences that range from curriculum-embedded capstones to aligning in- and out-of-school learning in the community.</p>
        </div>
        </div>
</div>

Start with something more simple.

.shadowbox {
  position: relative;
  width:50%;
}
.shadowbox:before, .shadowbox:after {
  content:'';
  z-index: -1;
  position: absolute;
  bottom: 15px;
  left: 10px;
  width: 25%;
  top: 80%;
    box-shadow:0 20px 15px #777;
    transform:rotate(-5deg);
}
.shadowbox:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

https://jsfiddle.net/61atov8w/2/#&togetherjs=oyEsIjJwpM

I was able to get it to work, but oddly I had to turn off the background color and eliminate the padding of the parent element to do so. — Benjamin Morrison, Dec 11 '18 at 20:33

score 0 · Answer 2 · answered Dec 11 '18 at 05:59

Pseudo-elements :before and :after need a content property to render to the screen.

Add content: ''; inside your .shadowbox:before, .shadowbox:after { } and then it should render.

See more on that here: Why do the :before and :after pseudo-elements require a 'content' property?

CSS Lifted Corners in Foundation 6

2 Answers2