Elegant Themes Blog

Stay up to date with our most recent news and updates

CSS Tricks For Your Divi Theme Project And Product Thumbnails

Posted on March 26 by in Tips & Tricks | 66 comments

CSS Tricks For Your Divi Theme Project And Product Thumbnails

Last week we posted Origin Theme CSS Tricks and got a few comments about applying the effects within Divi. Below are a number of CSS tricks to help customize your Divi Theme project and product thumbnails. Each example has an animated preview and a block of custom CSS required to achieve the effect. As always, we recommend that you add all custom CSS via a Child Theme or the Custom CSS Box in ePanel.

Overlay Zoom In

By default, project and product overlays simply fade in. The CSS below will modify the overlay to zoom and fade in, with a reverse animation when the cursor hovers off.

divi-overlay-zoom

.et_overlay {
	-webkit-transform: scale(.9);
	-moz-transform: scale(.9);
	-o-transform: scale(.9);
	-ms-transform: scale(.9);
	transform: scale(.9);
}

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}


Overlay Slide Up

The CSS below will modify the overlay to fade in and up from the bottom of the thumbnail, with a reverse animation when the cursor hovers off.

divi-overlay-slideup

.et_overlay {
	top:30px;
}

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{
	top:0;
}


Overlay Spin

The CSS below will modify the overlay to spin and zoom in, with a reverse animation when the cursor hovers off.

divi-overlay-spin

.et_overlay {
	-webkit-transform:  scale(.6) rotate(-30deg);
	-moz-transform:     scale(.6) rotate(-30deg);
	-o-transform:       scale(.6) rotate(-30deg);
	-ms-transform:      scale(.6) rotate(-30deg);
	transform:          scale(.6) rotate(-30deg);
}

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{
	-webkit-transform:  scale(1) rotate(0deg);
	-moz-transform:     scale(1) rotate(0deg);
	-o-transform:       scale(1) rotate(0deg);
	-ms-transform:      scale(1) rotate(0deg);
	transform:          scale(1) rotate(0deg);
}


Thumbnail Hover Rise

The CSS below will cause the whole thumbnail to slightly rise off the page upon hover. The overlay has been removed for this effect, but you can leave it if you wish.

divi-overlay-raise

.et_overlay {
	display:none;
}

.et_portfolio_image, .et_shop_image  {
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.et_portfolio_image:hover, .et_shop_image:hover {
	-webkit-transform: scale(1.04);
	-moz-transform: scale(1.04);
	-o-transform: scale(1.04);
	-ms-transform: scale(1.04);
	transform: scale(1.04);
}


Project Thumbnail Border

The CSS below will add a border to your project thumbnails. The example below is combined with the “Slide Up” example above, but can be combined with any or no addition modifications.

divi-thumbnail-border

.et_portfolio_image{
	border: 5px solid #fff;
	-moz-box-shadow: 0 1px 4px rgba(0,0,0,.3);
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3);
	box-shadow: 0 1px 4px rgba(0,0,0,.3);
}


Overlay Custom Colors

You can simply modify the existing colors and styles with the CSS below. These modifications will allow you to define the overlay background color, the border style, icon color, and overlay opacity.

divi-hover-custom

.et_overlay {
	background: rgba(50, 200, 235, 0.6); /* overlay background color */
	border: none; /* border style */
}

.et_shop_image .et_overlay:before, .et_portfolio_image .et_overlay:before{
	color: #FFF !important; /* + icon color */
}

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay { opacity: 1; } /* overlay opacity */


If you liked this theme tip, take a stroll around the blog for more of our free resources and please let us know what our next theme tip should be!

66 Comments

  1. Nice little code snippets to build awesome looking website.

    Thanks and Bookmarked.

  2. Some great CSS takes you a long way! Thanks for posting this. Is it IE compatible? If so, which versions?

    Thanks!

  3. Great little customization to take the theme to the next level…I love that you guys are always focusing on improving what is already great!

  4. Thank you! This is awesome :)

  5. Wtf is CCS? Did I miss something or are you guys sloppy as hell when it comes to proofreading? :P

  6. I am continually amazed at what some creative CSS can do, especially with a well-designed theme such as Divi. Thanks for the code.

  7. The grammar nazi in me wants your to correct CCS to CSS in the post title :)

    • You’re not alone. Easy done though.

    • Kane, You might want to work on your own english grammer. Try making sense:
      “The grammar nazi in me wants your to correct CCS to CSS in the post title”

    • You just have nothing better to do than to correct someone else’s typo by using your own bad grammar?
      I guess the world needs more self righteous hypocrites.

  8. Thanks a lot for that nice post! I was looking for a possibility to show the thumbnails in a square format. any idea anyone?

  9. thank you for the tip, the Overlay Custom Colors is the one i like it :D

  10. Great job Kenny… Keep up the great work.
    AND please keep em’ coming!

    cheers

  11. I’m wondering how we can keep the slide images from disappearing from the slide show when viewing it on mobile.

    Please help.

  12. Hi Kenny Sing,

    Thanks for the post. I was wondering if there is a way to make blurb’s act the same way? I would like to show the image and title of the blurb. Then when someone mouseover it will show the text / description.

    Also with the product / project is there a way to have a brief description appear over the image on mouseover?

    Thanks for the help,
    Jay

    • I completely agree with Jay, I’m looking for code for blurb images too. Is this possible?

      • Totally agree – that would be an awesome addition!

    • Another vote for product info on hover.. I’m so desperate for being able to making my product page visual-focused and have product name, brand, color options and price appear as overlay on hover.

  13. Thank’s again!
    Is it possible to add “Thumbnail Hover Rise” effect to blog thumbs?

  14. Thanks :) these tips and tricks really help. Can I ask – most of the css mods are via the epannel – can you give me some examples of css in the modules? thanks – loving Divi – now building whole sites in a day thanks to you guys :)

  15. WOW! What can I say? These posts just keep getting better and better. My website and several client websites have been built using divi and these snippets will be a nice way to add some new flavor to those sites. Thanks again, and keep em’ coming!

  16. Is it possible to have a title in the center of the overlay instead of a symbol ?
    Great tip !

  17. How about custom content in the overlay? Rather than just an icon how about letting us add our own custom HTML?

    • Whoa, Elijah! How did you get your navigation menu to be clear/transparent? Love all the customization you’ve added. Awesome site, btw!

  18. These posts save us so much time.

    No matter how good your coding skills are, it takes time to work out what css you need to effect the changes you want and these quick css tips really help.

    Keep them coming please ET!

  19. Nice nifty tips Kenny. Divi is malleable and I’d love to see more ways to style the menu area and the inner tweaking of the fullwidth module like if I want to embed icon or an image on it.

    Thanks.

  20. Another interesting post. Learn lot of new coding from you. Thanks for the share.

  21. Love it, we want more!! Please!!

    Why are these not embedded into future versions of the Divi Theme?

  22. Thanks for the tips Kenny

  23. but… where I can put this trick in my web? I Know..in CSS but in which part??

    Thanks

  24. Hi, I use Divi whenever i can when creating websites for clients – you asked us to suggest a new blog topic and first i’d like to say that these CSS tips are great (you could do that ALL DAY LONG and never run out of good tips and things that will help all of us).

    Also, I’d really like to see a blog post that shows some different ways we can layout the home page of Divi because it’s hard for me to sell the same site (structure) to different clients. I don’t want them to think i’m selling them the same exact site!!! So if you can show us some different ways that you or others have used Divi that would be GREAT too.

    Thank you, Emily (pd my latest Divi site is here: drten20.com check it out!!!

  25. Awesome! It’s great having CSS tips like this! DIVI is fun to play with but CSS tweaks are not the fun part for me. Please keep it up!

  26. Is there any CSS magic to make a sidebar scroll as a page is scrolled?

  27. I particularly like the thumbnail border and custom colours. Nice work, Elegant Themes!

  28. Where can I find code for a Divi social media bar on the side of my pages? Excellent work you guys!

  29. Great tips, started to work with Divi and really liking it.

  30. I recently just installed Divi on my site and love it so far. I am going to experiment with the custom color overlays this week. Thanks for the tips!

  31. Hey, with referenze to the above chapter ‘Project Thumbnail Border’ what CSS code for blog image (page build with blog module – divi template). Thanks

  32. thanks for css cods

  33. These were great. Could you give us some css box shadow options for the slider? That would be great!

  34. Great tricks! By the way, how do we remove the from source? It’s a security concern for us. Thank you!

  35. I meant to say: meta content=”Divi v.1.9.1″ name=”generator”

  36. do these snipets still work with divi 2?

    • madrynweb,

      Yes, it is possible to have these snippets work with Divi 2.0. I used the Thumbnail Hover Rise. Here is the coding I wrote up:

      .et_overlay { background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3); !important; }

      .et_overlay:before { display: none !important; }

      .et_pb_portfolio_image { -moz-transition: all 0.3s !important; -webkit-transition: all 0.3s !important; transition: all 0.3s !important; }

      .et_pb_portfolio_image h3 { color: #FFFFFF !important; text-transform: uppercase; !important; font-size: 14px !important; font-weight: 800 !important; }

      .et_pb_portfolio_image:hover { -webkit-transform: scale(1.05) !important; -moz-transform: scale(1.05) !important; -o-transform: scale(1.05) !important; -ms-transform: scale(1.05) !important; transform: scale(1.05) !important; }

      You simply have to swap out anything that says “.et_portfolio_image” for “.et_pb_portfolio_image” etc. Hope this helps.

      • Is there a code for divi 2.0 to change the overlay to black and white?
        Thanks

  37. Hi,
    Can you please give CSS code for image slider? I want boxed image (1170 X 500) slider not full width slider(1920 x 1080)

    Thank you,
    Bhargav

    • Bhargav, with Divi, you can create any type of slider layout you want. You can have the full width, boxed with and many sizes in-between.

    • Dear Bhargav,
      Can you please tell me that how can i add a css for any particular PIC in our divi theme with the page layout.

  38. Is it possible to change the animation color and add text in it ?

  39. I think everyone wants to know how to get the effect displayed on the demo: http://elegantthemes.com/preview/Divi/
    With the title and category appearing on mouse over.
    I couldn’t find it.
    Or is this another plugin?

    • I just found out, the effect is available only on the Fullwidth Portfolio module.

      • thanks me!
        haha

  40. Here’s a newbie question; is there any way to make the images square shaped rather than the slightly rectangular?

    • I agree, a tutorial on this would be fab.

  41. Thanks a lot!

    I’ve one question though.

    I’m trying to get an overlay on my fullwidth portfolio carousel. But I can’t figure out how to change the ‘overlay background color’.

    This is what I tried:

    .et_overlay {
    background: rgba(124, 215, 198, 0.6); /* overlay background color */
    border: none; /* border style */
    }

    .et_shop_image .et_overlay:before, .et_pb_fullwidth_portfolio .et_overlay:before{
    color: #FFFFFF !important; /* + icon color */
    }

    .et_shop_image:hover .et_overlay, .et_pb_fullwidth_portfolio:hover .et_overlay { opacity: 1; } /* overlay opacity */

    Thanks in advance!

  42. Dear All,
    I’m new here and making some improvements with Divi Theme.
    But I still have a couple questions:

    1) How can I access the CSS Box on epannel?
    2) How can I modify the CSS code to insert the Overlay Slide Up?
    3) And how can I ajust my company logotype (for a bigger size)?

    Thank you very much.

    Regards

    Ricardo

  43. Can someone help me please, I have spent hours trying to make my gallery images do the “Thumbnail Hover Rise” from above, but when I enter the code into the Divi theme options Custom CSS box, it ends up turning the images into static images with no animation or overlay at all, as if they are just regular images.

    The other options above don’t function correctly for me either, the “Overlay Spin” ends up with my overlay being stuck at an angle, but not moving. It changes for each on mouse over, but doesn’t carry out the animation.

    The only one I can get to work is the “Overlay Custom Colors” one. What am I doing wrong? I’m editing a main Divi theme, and putting the above css code into the custom css box within the “divi theme options under Appearance.

    I’m lost :( Hope someone can help me!

  44. Hi. Is there a way to create a full boxed layout that there is margin on top and background color/pic visible and also margin below footer and all the corners rounded? So that it would look a bit like this http://kaisakarvo.fi/ ? This could be also a new template feature in future updates…? And Divi is the best theme I´ve seen so far! Keep up the good work!

  45. Loving this theme!! So very customizable. I was wondering if it were possible to add different transitions to the full width slider, by giving it an CSS tag and writing some code, thereby also allowing to randomize it? Or does one have to create a full child theme for it?

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *

Join 261,586 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This