Thirteen Theme

• 

  picturesquekeepsakes · Member · Jan 24, 2013 at 4:42 am

  • Copy link
  • Add topic to favorites

  I have added a reflection to an image on my site through css code I found online, to match the image on my business card. I am an extreme novice to css and am having trouble with the color stop (I think). Here is the code I used. I would like to change the white part under the reflected image to match the background color, as if the white part wasn’t there. I don’t want that visible. How would I adjust the necessary values in my code to achieve this? Thanks!

  My site is http://picturesquekeepsakes.com (on wordpress.com)

  .image-block {
  width: 477px;
  margin: 0;
  float: left;
  }

  .reflection {
  position: relative;
  }

  .reflection img {
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: flipv;
  opacity: .2;
  filter: alpha(opacity=’20’);
  }

  .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 477px;
  height: 316px;
  background-image: -moz-linear-gradient(center bottom,rgb(255,255,255) 60%,rgba(255,255,255,0) 75%);
  background-image: -o-linear-gradient(rgba(255,255,255,0) 25%,rgb(255,255,255) 40%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.60,rgb(255,255,255)),color-stop(0.75,rgba(255,255,255,0)));
  filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0,EndColorStr=#ffffff);
  }

  The blog I need help with is: (visible only to logged in users)

• 

  picturesquekeepsakes · Member · Jan 24, 2013 at 5:11 am

  • Copy link

  I have figured out what to do.