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.

.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.

.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.

.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.

.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.

.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.

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

Source link