Rev slider shadow 1 added to regular image

[lobsterass]

Hello awesome Neighborhood developers!

Is it possible to get some kind of class code or something to manually add a shadow looking like the “shadow 1” for rev sliders to a regular image as well? I wanna match my shadows. Please see attached image.

<3

A

[Mohammad – SUPPORT]

Hi,
If you provide specific page url so i can give exact solution.
Thanks 🙂
With Best Regards
Swift Ideas

[lobsterass]

Hi!

http://monroedesign.se/webbdesign-arbetsprocess/

pass: johan

[Melanie – SUPPORT]

Hi

try

div#rev_slider_8_1 {
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.15);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.15);
box-shadow: 0 2px 2px rgba(0,0,0,.15);
}

.tp-bannershadow.tp-shadow1 { display:none; }

Let me know if that worked!

[lobsterass]

Hi Melanie!

I forgot (sorry!) to mention I had altered the rev slider shadow with this code from Ed:

.header-shadow #header-section:before {
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
.tp-bannershadow.tp-shadow1 {
opacity: 0.3;
}

The thing is, I still want the rev slider shadow the way it is now on other pages where the slider is in the top. Your code made the rev slider shadow disappear completely everywhere.

Now, as I have mixed several rev sliders with regular images in a scroll down layout on page http://monroedesign.se/webbdesign-arbetsprocess/ (pass:johan), I want rev sliders and images to have the same matching shadow.

Let’s do this instead:
Please give me a way to make the rev slider shadow on that specific page look just like the smaller shadow that can be seen in the regular images. Please see attached image. Is that possible? I guess I need some kind of class for the rev sliders box in the Swift page builder, right?

Thanx for being great, Melanie. 🙂
Cheers!

A

[Swift Ideas – Ed]

Hi there!

Well the Revolution Slider shadow is added with a separate element, so that they can add opacity to it. I’ve had to reduce the amount of shadow shown to create a similar effect, however you could alter the image if you need it to be identical. They use a 30% opacity on the image element.

The custom css is:

.spb_single_image.shadowframe {
background: transparent url(http://monroedesign.se/wp-content/plugins/revslider/rs-plugin/assets/shadow1.png) no-repeat;
background-position: center bottom;
padding-bottom: 20px;
}
.shadowframe img {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

Hope that helps.

– Ed

[lobsterass]

Hi Ed!

Thank you for the css. That worked nicely.

…I’m being a pain in the butt now. I think it would look better giving SOME (not all rev sliders on the site) of the rev sliders the same subtle drop shadow (see image please) as the regular images have. Is it possible to give some of my rev sliders a special class in Swift page builder to give them that shadow instead?

Sorry for the confusion…but it was hard to envision what it was going to look like in advance. My bad. If it’s too much to ask, I’ll just live with it. Inconsistent shadows kinda bugs me, though.

<3

A

[Swift Ideas – Ed]

Sorry for the delay. Sure, let’s just override the rev slider styles:

.tp-bannershadow.tp-shadow1 {
bottom: -24px!important;
}

You can increase-decrease that value to alter how much is shown.

– Ed

[lobsterass]

Cool! Thank you so much, Ed! I really appreciate your help.

<3

A

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved. Thanks Ed 🙂 .
With Best Regards
Swift Ideas