Coloured shadow around my picture

  • 1
  • Question
  • Updated 6 years ago
  • Answered
Hi guys does anyone know how to go about getting a shadow around a picture I have on my site like below: -



I also need to change the colour as I have a few pictures to add?

Any help would be appreciated!

Thanks

Craig
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Craig,

Are the two white corners in fact white or are they supposed to be transparent so that the absolute background is visible there?
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
If it is the photo you posted I show it as a bmp image...If so I am surprised you got it to work on Yola at all
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Here's a solution I hope Craig.

It's in a generic form so that you will need to add the rgb(a) code. The CSS covers the browser differences and I think it's good for IE7 on., FireFox 4 on and Chrome

The last figure in the rgba code is the transparency of the background colour and is not obligatory so if you don't want a translucency in your boxed background just drop it and remove the a from the rgba or simply use the color #hexcode. The width of the box shadow can be increased by increasing the number where I have inserted 5px

You mentioned that you have a number of images, so that means you will need to create a number of CSS classes with different box background colours.

I haven't included code for the very fine image border that you see.

CSS

.css-box-shadow-X {
position: relative;
-webkit-box-shadow: -5px 5px rgba(0,0,0,.5);
-moz-box-shadow: -5px 5px rgba(0,0,0,.5);
box-shadow: -5px 5px rgba(0,0,0,.5);
}

HTML

<div class="css-box-shadow-X ">
<img src="resources/image.jpg" alt="whatever" />
</div>