I love the Image Module in Divi but sometimes I feel like adding an image in a Text Module gives me a little more control over the image.

So for those of you who feel more comfortable adding an image in the text module, here are some examples of how you can apply some style to those images using CSS. Such as borders, making a square image a circle image, making it black & white, making it blurry and giving it cool hover effects.

 

Check out our Demo Page Here

008

 

First things first.

1. The first thing you will need to do is add a text module to your page and add an image in that text module.

000

 

2. Next you will have to assign your text module a unique CSS Class. In this first case I will use: image-square

001

 

Now The Magic of CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not go to Divi>Theme Options. This will open up the ePanel. Now scroll down until you get to the Custom CSS box on the bottom of this page. This is where you will be adding the CSS.

 

The Basic Square Border

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

002

Use this CSS.

/* change size and add border */
	.image-square img {
    		max-width: 250px;
    		border: 10px solid #000;}

 

The Circle Border

With this image I changed the border color and made it round using a border-radius in the CSS. This works best on square images only.

003

Change the CSS Class in the Text Module to : image-round

Then use this CSS.

/* rounded corners */
	.image-round img {
    		max-width: 250px;
    		border: 10px solid #da2127;
    		border-radius: 150px;}

 

The Black & White Image

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

004

Change the CSS Class in the Text Module to : image-grey

Then use this CSS.

/* black & white */
	.image-grey img {
    		max-width: 250px;
    		border: 10px solid #54544b;
    		border-radius: 150px;
    		-webkit-filter: grayscale(100%);
    		filter: grayscale(100%);}

 

The Blurry Image

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

005

Change the CSS Class in the Text Module to : image-blur

Then use this CSS.

/* blur */
	.image-blur img {
    		max-width: 250px;
    		border: 10px solid #54544b;
    		border-radius: 150px;
    		-webkit-filter: blur(5px);
    		filter: blur(5px);}

 

The Combined Filters & Hover Effect

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

006

Change the CSS Class in the Text Module to : image-combined

Then use this CSS.

/* combined with hover */
	.image-combined img {
    		max-width: 250px;
    		border: 10px solid #54544b;
    		border-radius: 150px;
    		-webkit-filter: grayscale(100%) blur(2px);
    		filter: grayscale(100%) blur(2px);}

	.image-combined img:hover {
    		border: 10px solid #da2127;
    		-webkit-filter: grayscale(0%) blur(0px);
    		filter: grayscale(0%) blur(0px);}

 

 

A Smooth Transition to the Hover Effect

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.

007

Change the CSS Class in the Text Module to : image-transition-delay

Then use this CSS.

/* transition delay */
	.image-transition-delay img {
    		max-width: 250px;
    		border: 10px solid #26da20;
    		border-radius: 150px;
    		-webkit-filter: grayscale(100%) blur(2px);
    		filter: grayscale(100%) blur(2px);
		transition: 0.8s;
		-moz-transition: 0.8s;
		-webkit-transition: 0.8s;}

	.image-transition-delay img:hover {
    		border: 10px solid #267924;
    		-webkit-filter: grayscale(0%) blur(0px);
    		filter: grayscale(0%) blur(0px);}

 

Check out our Demo Page Here

008

 

 


Well that’s all for now. I hope you find this article useful.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest