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.
.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.
.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.
.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.
.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.
.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.
#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.
@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!