sparkles2.png

Text & Image Block - Curved Edges

 

To make a more modern look and feel on a site you may want to add some curvature to your images. This effect helps you achieve this.

 
 
 

See the effect in action

 
Screenshot 2021-07-06 at 11.45.10.png
 
 
 

How to use the Effect

Select the Text & Image block that you wish to apply the effect to, select 'Actions' from the top header of BlockLab and then select 'Custom CSS'. Copy and paste the below code into the pop up, hit save and the effect will be applied.

 

CSS

block .ti-text {
    border-top-right-radius: 17px;
    border-top-left-radius: 17px;
    border-bottom-right-radius: 17px;
    border-bottom-left-radius: 17px;
}
block img {
    border-top-right-radius: 17px;
    border-top-left-radius: 17px;
    border-bottom-right-radius: 17px;
    border-bottom-left-radius: 17px;
}

(the .ti-text section will make sure that there the white text block is also curved and not just the image on top)