Warning: A non-numeric value encountered in /home/monter43/public_html/demos/superslimsubscribe/wp-content/themes/Divi/functions.php on line 5752

Styling Text Images

geno 400x400

This is the original 400 x 400 image I added using the text module. I will be using this same image for the examples below.

With this image I reduced the maximum width to 250px and gave it a black border using css

geno 400x400

With this image I changed the border color and made it round using a border-radius in the css

geno 400x400

With this image I gave the image the appearance of being black and white using the grayscale filter in the CSS

geno 400x400

With this image I gave the image the appearance of being blurred using the blur filter in the CSS

geno 400x400

With this image I combined the filters and added a hover effect that removes the blur and grayscale in the CSS

geno 400x400

With this image I added a transition time to the hover so it has the effect of a smoother transition rather than just an instant change.

geno 400x400

transparent.fw

Go here to see the actual tutorial for these CSS effects.

GO NOW