So I have a grandparent div called projects and a parent div called wiggle within it. In wiggle I have a p element set to 100% width. However, it is taking its width from the grandparent instead of from wiggle. I need to keep the p absolutely positioned due to its placement on top of the border of the parent's image. I have researched this issue and people regularly suggest setting a calculated width so I tried that and it worked... sort of.
The oddest thing about this puzzle is that while the wiggle transform is running, the width changes relative to the parent and once its over, the width is relative to the grandparent once more. The transform properties do not attempt to control widths in any way.
Please see my fiddle here.
.cork {
background-image: url("https://s28.postimg.org/w8m9mc84d/cork_repeatable.jpg");
background-repeat: repeat;
/*min-height: 400px;*/
}
h1 {
color: white;
font-family: 'Sansita', sans-serif;
font-style: italic;
margin-bottom: 20px;
}
#pushpin {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 0;
margin: 0;
margin-bottom: -45px;
position: relative;
left: calc(50% - 40px);
z-index: 1;
}
.projects img {
border: 10px solid #fff;
border-bottom: 55px solid #fff;
margin-bottom: 30px;
-webkit-box-shadow: -8px 11px 8px #232323;
-moz-box-shadow: -8px 11px 8px #232323;
box-shadow: -8px 11px 8px #232323;
}
.projects img:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
}
@media (min-width: 992px) {
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/* Firefox 10+, Firefox on Android */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
/* IE 6-9 */
}
}
@media (min-width: 1500px) {
.row {
width: 130%;
position: relative;
left: -15%;
}
}
/* safari and chrome */
@-webkit-keyframes wiggle {
0% {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 50% 0%;
-moz-transform: rotate(0deg);
-moz-transform-origin: 50% 0%;
-ms-transform: rotate(0deg);
-ms-transform-origin: 50% 0%;
-o-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: 50% 0%;
}
25% {
-webkit-transform: rotate(3deg);
-webkit-transform-origin: 50% 0%;
-moz-transform: rotate(3deg);
-moz-transform-origin: 50% 0%;
-ms-transform: rotate(3deg);
-ms-transform-origin: 50% 0%;
-o-transform: rotate(3deg);
transform: rotate(3deg);
transform-origin: 50% 0%;
}
50% {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 50% 0%;
-moz-transform: rotate(0deg);
-moz-transform-origin: 50% 0%;
-ms-transform: rotate(0deg);
-ms-transform-origin: 50% 0%;
-o-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: 50% 0%;
}
75% {
-webkit-transform: rotate(-3deg);
-webkit-transform-origin: 50% 0%;
-moz-transform: rotate(-3deg);
-moz-transform-origin: 50% 0%;
-ms-transform: rotate(-3deg);
-ms-transform-origin: 50% 0%;
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
transform-origin: 50% 0%;
}
100% {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 50% 0%;
-moz-transform: rotate(0deg);
-moz-transform-origin: 50% 0%;
-ms-transform: rotate(0deg);
-ms-transform-origin: 50% 0%;
-o-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: 50% 0%;
}
}
.wiggle {
-webkit-animation: wiggle 4s linear 2;
-moz-animation: wiggle 4s linear 2;
-ms-animation: wiggle 4s linear 2;
-o-animation: wiggle 4s linear 2;
animation: wiggle 4s linear 2;
}
.wiggle p {
position: absolute;
text-align: center;
width: 100%;
bottom: 30px;
font: 400 18px/1'Kaushan Script', cursive;
color: #232323;
z-index: 1;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
<div class="container-fluid cork">
<h1>Portfolio Examples</h1>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-12 projects">
<img id="pushpin" src="https://s29.postimg.org/5am0cdtw3/push_pin_shadow.png" width="70px" />
<div class="wiggle">
<p>Data-Soap.com</p>
<img src="https://s29.postimg.org/6bm91iavr/data_soap_dash.png" width="100%" />
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 projects">
<img id="pushpin" src="https://s29.postimg.org/5am0cdtw3/push_pin_shadow.png" width="70px" />
<div class="wiggle">
<p>Data-Soap.com</p>
<img src="https://s29.postimg.org/6bm91iavr/data_soap_dash.png" width="100%" />
</div>
</div>
</div>
</div>
</div>In wiggle I have a p element set to 100% width. However, it is taking its width from the grandparent instead of from wiggle.
Your p element is absolutely positioned. Absolutely positioned elements positions are relative to the closest "positioned" (ie, not position: static; - the default). So whatever element you want your absolutely positioned element to be positioned relative to, make sure that is the closest parent to your absolutely positioned element and give it a position other than static.
http://www.w3schools.com/css/css_positioning.asp
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).