I have a few problems with theming/styling a grid made in Views.
I used the following:
- Drupal 7.34
- Views 7.x-3.8
- Chaos tools 7.x-1.4
- Zen subteme
The result I want to achieve is to make a grid with three collumns. The blocks consist of a title and an image retrieved from the nodes. The three tiles should be devided over the width of the content area. The height should be the same as the width. The image should be the background of the block and the title should be in the center of the block. When you hover over a block the image should change in a blue background color. Ideally the title should only be shown on hover. When a node does not have an image the block should have a blue background color with the title. On top of that I would like to create a checkersboard. So the even blocks should not show the image but a have a blue background color with a title.
I rewrited the output of the field in views
<div class="frontblocks">
[field_image]
<h2>[title]</h2>
</div>
and added the following css in my stylesheet.
.frontblocks {
position: relative;
width: 230px;
display: block;
background-color: blue;
text-align: center;
text-decoration: none;
}
.frontblocks td {
background-color: blue;
}
.frontblocks img {
width: 230px;
height: 230px;
}
.frontblocks img:hover {
opacity: 0;
width: 230px;
height: 230px;
}
In the result I've got so far there are six blocks. I managed to change the background color when hovering. But I have several problems I can't fix.
Problems:
- the alignment of the title. For some reason when I use text-align: center the title is shown underneath the image not on top of it.
- to create the checkersboard I tried to use :nth-child, but unfortunatelly I didn't get it working.
- when hovering the image the color changes, but when I hover the title the image comes back as background.
- when a node does not have an image the space is empty. Background is white and the title is nowhere to be found.
Thanks in advance for helping me out!