Archived

This topic is now archived and is closed to further replies.

  • 0

Featured Slider Images - Curved Corners


Question

Posted · Report post

I would like to add some CSS to round the corners of the images in my Featured Sliders. Just wondering if that is possible as the images are scrolling. Silly question maybe.

 

I have done it on another site by applying this CSS:

 

 

    border-bottom-left-radius3px;
    border-bottom-right-radius3px;
    border-top-left-radius3px;
    border-top-right-radius3px;
    box-shadow0 0 2px #000000;
 
It works fine on static images.
 
I'd hate to have to do this in Photoshop.
 
Beta website here: http://goo.gl/eSjqF
 
Thanks for any and all suggestions / help!
 
:zoro:

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

Excellent :-)

 

The black is coming from an image which is applied behind the slider, its called black linen. You can remove with the below

 

#feature_slider #feature-area {
    backgroundnone repeat scroll 0 0 transparent;
    box-shadownone;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, yes you can apply it directly to the image container

 

#feature_slider .fcontainer .feature-wrap.bg_cover {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px 10px 10px 10px;
}

Share this post


Link to post
Share on other sites

Posted · Report post

 

Hi there, yes you can apply it directly to the image container

 

#feature_slider .fcontainer .feature-wrap.bg_cover {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px 10px 10px 10px;
}

 

Pretty good. Need to make the background white. Check it out ... Plus the CSS fix only worked in Chrome & Opera. added !important for FF

Share this post


Link to post
Share on other sites

Posted · Report post

 

Excellent :-)

 

The black is coming from an image which is applied behind the slider, its called black linen. You can remove with the below

 

#feature_slider #feature-area {
    background: none repeat scroll 0 0 transparent;
    box-shadow: none;
}
 
You da man James!
 
added !important to the code

 

Share this post


Link to post
Share on other sites