Elegant Themes Blog

Stay up to date with our most recent news and updates

CSS Tricks For Your Origin Theme Homepage

Posted on March 21 by in Tips & Tricks | 35 comments

CSS Tricks For Your Origin Theme Homepage

Below are a number of CSS tricks to help customize your Origin Theme homepage. Each example below 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.

Project Hover – Fade In

The CSS below will modify the project info so that it fades in upon hover, with a reverse fade when the cursor hovers off.

origin-css-fade-in

.image-info {
	opacity: 0;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.entry-image:hover img, .entry-image.et_hover img, .entry-image:hover .image-info, .entry-image.et_hover .image-info {
	opacity: 1.0;
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	-o-animation: none;
	animation: none;
}


Project Hover – Fade Up

The CSS below will modify the project info so that it fades in and upwards upon hover, with a reverse animation when the cursor hovers off.

origin-css-fade-up

.image-info {
	opacity: 0;
	top: 5px;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.entry-image:hover img, .entry-image.et_hover img, .entry-image:hover .image-info, .entry-image.et_hover .image-info {
	opacity: 1.0;
	top: 0;
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	-o-animation: none;
	animation: none;
}


Project Hover – Zoom In

The CSS below will modify the project info so that it fades and zooms in upon hover, with a reverse animation when the cursor hovers off.

origin-css-zoom-in

.image-info {
	opacity: 0;
	-webkit-transform: scale(.98);
	-moz-transform: scale(.98);
	-o-transform: scale(.98);
	-ms-transform: scale(.98);
	transform: scale(.98);
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.entry-image:hover img, .entry-image.et_hover img, .entry-image:hover .image-info, .entry-image.et_hover .image-info {
	opacity: 1.0;
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	-o-animation: none;
	animation: none;
}


Project Hover – No Shadow

By default, the info overlay appears with a drop shadow. If desired, the CSS below will remove the default shadow. The example below is combined with the “Fade In” example above, but can be combined with any or no addition modifications.

origin-css-no-shadow

.image-info {
	-moz-box-shadow: inset 0 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
	-webkit-box-shadow: inset 0 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
	box-shadow: inset 0 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
}


Project Hover Custom Color

The CSS below allows you to set a custom color for the project info overlay. The example below is combined with the “Fade In” example above, but can be combined with any or no addition modifications.

origin-css-custom-color

.image-info {
	background: #465A78; /* overlay HEX color */
	background: rgba(70, 90, 120, 0.9); /* overlay RGBA color */
	-moz-box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
	-webkit-box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
	box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
}


Navigation Hover Fade In

The CSS below modifies the default navigation item hover state. See the hover effect below.

origin-css-nav-hover

#top-menu .link_bg {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}


Fixed Navigation

By default, the side navigation in Origin scrolls up and down with the page content. If desired, the CSS below will create a fixed navigation. If you have a lot of content in your sidebar, this effect is not recommended because the amount of viewable content in your sidebar is limited by the user’s browser height.

origin-css-nav-fixed

@media screen and (min-width: 1024px) {
	#info-area { position: fixed; }
}


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!

35 Comments

  1. Hey, it is possible to apply above custom CSS code to the images of portfolio /project page in divi themes? Thanks

    • The syntax would be different, but in effect, you should be able to similarly modify the overlays in Divi. Maybe I can get more specific in a future post ;)

      • Is there a way to use the code on the blurb module in Divi? That would be awesome if there is.

  2. Hi Kenny
    I’m not using Origin but I’m always interested in playing around with CSS effects.

    Thanks for putting these together.

    • Origin is great for displaying portfolio items. I actually use it for my personal portfolio site.

  3. Great tips! What do you use for the screen cast and convert to GIF? I’d love to use that on some client sites. Thanks!

      • Thanks for that share Kenny.

        That has me thinking, maybe a future post about the essential tools in a developer’s toolbox might be a good idea.
        With links similar to the one above.

        You know, seeing how you guys are not that busy…!

        ;-)

        • Plus one for this…

      • Nice post, Kenny. Thanks a ton for the Licecap link. Very cool little program!

        I love Elegant Themes Blog – one of the few blogs where I learn stuff every post.

        Thanks!

      • That’s what I was looking for… thanks a lot for sharing.

    • Thanks for asking Steve and thanks for the link Kenny.

  4. Nice effects. I’m using the Divi theme. Will these effects translate to Divi?

  5. Hi, that was a great article – Thanks!
    I read above that you are looking for ideas for what the next theme tip should be – I was wondering if you have tips to make the Divi slider animation more interesting than the effect that is on there right now?
    Rosy

  6. This is good information, but is there any new themes in the works? It’s been a while since Divi released with no new themes since..

  7. This post has me rethinking using Origin for a client who is a seamstress and needs her projects displayed prominently. She doesn’t blog though. Can the front page be made up of pages instead of posts?

    Also, with the diversity of Divi (that sounds cute doesn’t it?), what is the advantage now of using these singular themes? Just curious on your thoughts? Thanks.

    A good job is being done here at Elegant Themes. I had left you guys for Woo for awhile, but I’m liking what I’m seeing, and will probably kick Canvas to the curve for Divi.

  8. Appreciate the tips n tricks. But as we all know mobile browsers are becoming the most used and since it’s impossible to ‘Hover’ with a mobile browser these tips n tricks are beneficial for desktop browsers that use a mouse.. now that brings an interesting thought…O_o! to have a hover feature on a mobile browser ;)

    • The css effects still work on mobiles, though only when you tap them. A css workaround to have the text overlays display permanently on mobile devices may be the better option.

  9. One of the best css tricks .

  10. Awesome tips, thanks Kenny…

  11. I don’t know how to use this stuff but you give me hope I will learn.

  12. Haven’t worked with this theme yet, but will definitely start using it soon! Still very much in love with Divi… *drool*

  13. nice tutorial. will help the wordpress user’s

  14. Are there CSS codes and tricks to make things cooler on Divi? Origin is a great theme, don’t get me wrong, but would love to learn some CSS tricks on my website for Divi :)

  15. How do I change the background hover color on the navigation bar? When hovering over child categories the default background color hides the default text color since they are both white. Thanks!

  16. this tutorial very useful for me. thank uuuuu

  17. Dear Kenny Sing,

    if you are using a plugin photoshop ? please share in the plugin or is there a trick CSS3 tutorial source you use.

    Thanks :)

  18. Hi, could you say wich is the size to make the thumbnails look well? the only bad thing of this theme is that, it should resize the images.

  19. Hi Kenny,

    Is there a rtl option for the origin theme?
    The theme is perfect for me and I want to use it but since I can’t customize the theme to start from the right, it’s a major setback.

  20. As you can see, Im using divi 2.0 but the problem seem’s to be that. when I hover over the top header menu’s they give me a black hover color which is bad considering I wish to put black as my header color. so it tends to make the menu’s dissapear. Tried applying the #top-menu .link_bg {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    }

    didn’t work. please help me out. :)

  21. Kyosuke,

    Try this, worked for me:

    #top-menu li a:hover {
    color: #ffffff !important;
    }

Leave a Reply

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

Current ye@r *

Join 253,319 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