Elementor blog post texts on hover

Style must be card style. Add the below css with custom class called .custom_post_brand

.custom_post_brand .elementor-post__card {
    position: relative;
}

.custom_post_brand .elementor-post__text {
    position: absolute;
    top: 25%;
    left: 0;
	  z-index: 555;
	  visibility: hidden;
	  transition: all .3s ease;
	  -webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	opacity: 0; height: 0;
}

.custom_post_brand a.elementor-post__thumbnail__link {
    background: #000;
    z-index: 5;
	  margin-bottom: 0px;
}

.custom_post_brand .elementor-post__card:hover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 55;
}


.custom_post_brand .elementor-post__card:hover .elementor-post__text {
	display: block !important;
	visibility: visible;
	opacity:1;
	height: auto;
	
}

.custom_post_brand .elementor-post__badge {
   position: absolute;
left: 0;
right: 0;
margin:0 auto !important;
	width: 250px;
	top: 20px !important;
    
}

.custom_post_brand .elementor-post__card:hover .elementor-post__badge{
	display: block;
    z-index: 555555;

}

.custom_post_brand a.elementor-post__read-more {
    padding: 5px 10px;
    background: #32D4B2;
    color: #fff !important;
}

Leave a Reply

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