placing a box shadow under a photo on a thread

[Ape]

Forum address: http://missingpeople.darkbb.com
Topic on forum if needed: http://missingpeople.darkbb.com/t202-jamilur-rahman
Hello everyone i am here now to fins someone thats can help me with a code

I am trying to add a shadow under the photo's when posted on the forum like this


I did try this site to help me but it did not work lol
https://paulund.co.uk/learn-css-box-shadow
CSS Box Shadow Effect 7 is the one i want really but if not i can use this Image

Code:

https://i11.servimg.com/u/f11/12/23/10/57/123r12.png

As you can tell i am not any good at codes lol
With the image i used this but i think im missing something.

Code:

img.resize_img:after {content: url(https://i11.servimg.com/u/f11/12/23/10/57/123r11.png)!important;
}

any help on this will be good thanks.

APE

[Guest]

Hi APE,

There are a few problems with your code. First one is that every image on a fm forum has the class resize_img so we'll have to find another selector. I think

Code: .tut-tex img

would work. The second problem is that the value of the content property has to be html. The code would be something like this:

Code:

.tut-tex img:after, .tut-tex img::after{
content:"";
background:url("https://i11.servimg.com/u/f11/12/23/10/57/123r11.png");
}

I tested this on your forum(using the browser's console) and I don't know why but it's not working. I haven't worked with pseudo elements(the ::before and ::after thing) for quite some time so I probably forgot to add something Anyway, add that CSS I gave you and tell me if you see any changes.

[Ape]

Hi APE,

There are a few problems with your code. First one is that every image on a fm forum has the class resize_img so we'll have to find another selector. I think

Code: .tut-tex img

would work. The second problem is that the value of the content property has to be html. The code would be something like this:

Code:

.tut-tex img:after, .tut-tex img::after{
content:"";
background:url("https://i11.servimg.com/u/f11/12/23/10/57/123r11.png");
}

I tested this on your forum(using the browser's console) and I don't know why but it's not working. I haven't worked with pseudo elements(the ::before and ::after thing) for quite some time so I probably forgot to add something Anyway, add that CSS I gave you and tell me if you see any changes.

Hello buddy No sadly this one did not work

[Ape]

BUMP BUMP

[Guest]

This should do it:

Code:

.tut-tex img{
    position:relative !important;
    box-shadow:4px 4px 10px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset !important;
}
.tut-tex img::before, .tut-tex img::after{
    content:"" !important;
    position:absolute !important;
    z-index:-1 !important;
    box-shadow:0 0 20px rgba(0,0,0,0.8) !important;
    top:0 !important;
    bottom:0 !important;
    left:10px !important;
    right:10px !important;
    border-radius:100px / 10px !important;
}
..tut-tex img::after{
    right:10px !important;
    left:auto !important;
    transform:skew(8deg) rotate(3deg) !important;
}

[Ape]

it sort of worked

The box shadow is not how i wanted it thou as you can see it is just acting like a normal box shadow not just under the photo it's self.

[Ape]

bump still looking ot make this work right

[Draxion]

@APE, are you simply wanting all profile details avatars to have the shadow effect 7?

[Ape]

Hello @Draxion

No on my site http://missingpeople.darkbb.com/ if you look at the posts of missing people you will see a photo of them http://missingpeople.darkbb.com/t222-liam-johnson
now i want the shadow to be under the photo's like this


right now it has a basic shadow around it
it would be better if i could use a image but if it can be done with CSS or JavaScript then that's even better '

if you need a test account with admin account let me know i will inbox you one

the one in this photo is Effect 2 and thats the one i really want if passable

[Draxion]

Yes, send me that information. That would be lovely.

[Ape]

PM sent

thanks for your help

[_Twisted_Mods_]

Code:

<style>
#imgbox {
    padding-bottom: 50px;
    display: inline-block;
    background-image: url(http://envision.wptation.com/wp-content/themes/envision/includes/modules/module.shadow/shadows/shadow-2.png);
    background-size: 100%;
    background-position: 0px 408px;
    background-repeat: no-repeat;
}
<style>

<span id="imgbox">
    <img src="https://www.missingpeople.org.uk/media/zoo/images/image1_cc2e51ee0f0633cedee3bfd1c1930176.jpg" alt="" class="resize_img" width="332" height="400">
</span>

[Ape]

Hello @_Twisted_Mods_ sorry i think im having a blond moment lol

where do it add this code ? lol

[Guest]

Add this to the CSS:

Code:

.tut-tex img{
    padding-bottom: 50px;
    display: inline-block;
    background-image: url(http://envision.wptation.com/wp-content/themes/envision/includes/modules/module.shadow/shadows/shadow-2.png);
    background-size: 100%;
    background-position: 0px 408px;
    background-repeat: no-repeat;
}

[Ape]

That sort of worked lol

[Ape]

it's ok i have removed the border around the photo's and i will leave it as that

Thank you all for your help your great

Problem solved & topic archived. Please read our forum rules: ESF General Rules