Masonry Title and Excerpt position

Hi,

I have a masonry element to display portfolio items. We want the Title and excerpt on 2 different positions over the image. Title on top of the image with a colored background and the excerpt on the bottom of the element, also with a custom background.
See mockup.
I use the following code to change background color and font color.

#top .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title { 
color: white!important;
background: #98d52e!important;
padding:0px !important; margin:0px !important;
}
.av-masonry-entry .av-masonry-entry-content {
background: #e1e1e1!important;
   color:#98d52e!important;
}

What code can I use to change the position of Title (to top) and excerpt (to bottom) without any padding/margins and full width?
THX Freek

UPDATE:
I managed to get what I want using this post: with the following css code:

.av-masonry-entry .av-masonry-entry-title {
    position: absolute;
    top: 0;
    z-index: 1000;
    width: 100%;
    text-align: center;
    background:rgba(152, 213, 46, 0.7);
    padding: 10px;
color: white!important;
}

.av-masonry-entry .av-masonry-entry-content {
position: absolute;
bottom: 0;
z-index: 1000;
width: 100%;
text-align: center;
color: white!important;
font-size: 20px;
background: rgba(255, 255, 255, 0.3);
}

Only 1 question left. Why is there a small gap on the left side of the excerpt text? see mockup : mockup site

• This topic was modified 6 years, 1 month ago by Freek.