Move title below image in Views grid format with CSS

Question

I'm trying to customize a View that I've created showing all of one published content type. The grid is set to have 3 columns. I also have it set as a Rendered Entity with view mode "Teaser" so that it displays the image and content.

Using CSS I've been able to modify the header size, hide the words in the teaser while leaving the image, and modifying the size of the teaser image.

I'd like to be able to display the title underneath the image rather than on top, as is the default. There is no setting in the Views module to achieve this that I can find, so I'm doing some modifications using CSS. I'm having some trouble figuring out which divs to use to do so (there seem to be quite a lot that don't move around so easily). The divs are currently positioned like so:

I did find that assigning display: table-header-group and display: table-footer-group to the images (l-slat__media) and header text (l-slat__header) respectively worked, after assigning display: table to article. But they were tiny and about 25% of the original size. Not really sure why this is happening.

Any input as to what I might be able to do to put the header text below the teaser image would be appreciated.

Answer 1

You could simply edit the "Teaser" view mode and place the title below the image using Display Suite Here are the instructions:

1. Download Display Suite and enable the "Display Suite" and "Display Suite UI" modules.
2. Go to admin/structure/types/manage/article/display/teaser where "article" is your content type.
3. In the "Layout for article in teaser" fieldset, select the "One column" layout and click Save.

4. You will now see a lot more fields, provided by the Display Suite module. One of those fields is the title field.

5. Now drag the title field up to the top, below the Image field, just like you requested. From what I understand from your question, you could remove the Body field as well.

6. All done! No custom theming required.

Answer 2

I dislike answering my own questions, but I was able to figure it out using CSS only and not downloading any new modules, which is what I had stated in my original question and preferred to do.

The answer is to set the header position as absolute and change the bottom padding of the text:

div.ViewClassName .l-slat__header {
    position: absolute;
    bottom: 30px;
 }

div.ViewClassName article {
    padding-bottom: 40px;
 }

Where .ViewClassName is the CSS class you can assign your View to alter it in the Views UI, .l-slat__header is a default value given to the header from the Views source code, and article is an object created by the Views source code. You could probably also create a selector to only get articles in a specific View. I dislike using pixels instead of em or %; it would probably take some more finagling to incorporate those, but I suspect it would work.