Glossy overlay on images

• 

  jdupley · Member · Apr 27, 2015 at 8:26 am

  • Copy link
  • Add topic to favorites

  http://www.barperformanceltd.com

  .glossy .image-wrap {
  	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
  	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
  	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
  	-webkit-border-radius: 20px;
  	-moz-border-radius: 20px;
  	border-radius: 20px;
  }
  
  .glossy .image-wrap:after {
  	position: absolute;
  	content: ' ';
  	width: 100%;
  	height: 50%;
  	top: 0;
  	left: 0;
  	-webkit-border-radius: 20px;
  	-moz-border-radius: 20px;
  	border-radius: 20px;
  	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
  	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
  }

  CSS3 Image Styles

  I am looking to add a glossy layer over the images on my site.

  I have found this code, from this site.
  But the demo doesnt work, Is there anyone who has managed to get this code to work. Or, can guide me as to how I should be using it. I add it to my custom.css stylesheet but obviously it doesnt work straight away, what do i need to change in the code or add to it.

  I appreciate this is me just being daft and its quite straight forward but ive hit a rutt and could do with a few hints!

  Cheers Developers, Doops.

• 

  jdupley · Member · Apr 27, 2015 at 9:57 am

  • Copy link

  <span class=”image-wrap” style=”position:relative; display:inline-block; background:url(/wp-content/uploads/2015/03/ipad-hires-carbon-fiber-wp22.png) no-repeat center center; width: 150px; height: 150px;”>
  <img src=”/wp-content/uploads/2015/03/ipad-hires-carbon-fiber-wp22.png” style=”opacity: 0;”>
  </span>

  I used this in my header.php file, which should hold the image i want the style to affect. however, it doesnt!

  When you get chance, HELP!

• 

  g471n · Member · Apr 27, 2015 at 10:00 am

  • Copy link

  So are you only wanting to apply the effect to the header image?

• 

  jdupley · Member · Apr 27, 2015 at 12:40 pm

  • Copy link

  Ideally it would be on every image on the site…
  Header images, Product Images, Blog Post images…

  Thanks for your interest!

• 

  thesacredpath · Member · May 11, 2015 at 8:20 pm

  • Copy link

  Hi @jdupley, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help in the volunteer-based WordPress.org Themes and Templates forum.

  For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.

  The differences between WordPress.com and WordPress.org.