Full width image grid

Hey there!

I’m trying to set up a full width image grid. You can see the current progress here on http://rhein-alarm.de.www146.your-server.de/home-2/ . My closest try so far is right below “Unsere Leistungen…”. Using other posts I was able to make it hoverable and center the text verticaly.

Unfortunately there are still some troubles which appear when the row collapses (e.g. on mobile): a small space is inserted between the images and the text is not centered vertically any more.

This is how I set everythin up so far:
A single row contains two columns. Both columns have a background image. I added a class column-with-hover to both columns and a class overlay to the text that I want to have appear on hover. Then I added the following custom css:

.column-with-hover .overlay {
visibility: hidden;
background-color: transparent;
//transition: all 200ms linear;
}

.column-with-hover:hover .columnbackground{
-webkit-filter: grayscale(100%);
border: 1px solid red;
}

.column-with-hover:hover .overlay{
/background-color: rgba(0,0,0,.5);/
visibility: visible;
}

The text is centered by applying
vertical-align: middle;
to each column.

I would love to have the same effect on mobile as well. Even after hours of search I couldn’t find the answer to it.

A second problem of mine is that I am not able to change the columns background image to grayscale. In my opinion the code should work, but neither is the image changed nor is the red border added (just for testing).

I would also be happy to consider any other solution to the whole problem. As you can see, I tried to achieve the same effect using a block grid, too.

Thanks for your support!!

Hi There,

That link returns the 404 page.

Could you please double check?

Thanks.

I’m so sorry! I reordered my pages a few hours ago and didn’t think about this link…
http://rhein-alarm.de.www146.your-server.de/

Hello There,

Thanks for updating in! I can see that you would like to have a fullwidth image grid. Instead of using block grid with your custom css, you can make use of the Essential Grid or The Grid plugin. Please check out the demos here: https://essential.themepunch.com/even-grid-jefferson/, https://essential.themepunch.com/, https://theme-one.com/the-grid/,

You can check out how we have integrated these plugins in the theme: https://theme.co/apex/forum/t/extension-essential-grid/68, https://theme.co/apex/forum/t/extension-the-grid/74

Hope this helps. Kindly let us know.

Hey there!

Thanks for the hint! But although the plugins offer a great range of options, they are not the solution to my problem. I really don’t want to set up some kind of preview for any post. When using Essential Grid for example there is always a hidden post generated and each image in the grid has a link to that post.

I was able to get the desired result for big screens on http://rhein-alarm.de.www146.your-server.de/ using html li items and the following css that I found on https://tympanus.net/codrops/2013/04/17/responsive-full-width-grid/:

<ul class="full-width-image-grid">
	<li style="background-image: url('#');"><div><h3>Felis catus</h3></div></li>
	<!-- ... -->
</ul>

.full-width-image-grid {
	margin: 35px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 100%;
}

.full-width-image-grid li {
	position: relative;
	float: left;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
}

.full-width-image-grid li:hover div {
	opacity: 1;
}

.full-width-image-grid li div h1,
.full-width-image-grid li div h2,
.full-width-image-grid li div h3,
.full-width-image-grid li div h4,
.full-width-image-grid li div p{
	width: 100%;
	color: #fff;
}

.full-width-image-grid li {
	height: 300px;
	width: 50%;
	width: -webkit-calc(100% / 2);
	width: calc(100% / 2);
}

@media (max-width: 875px) {
	.full-width-image-grid li {
		width: 100%;
	}
}

.full-width-image-grid li div {
	position: absolute;
	left: 20px;
	top: 20px;
	right: 20px;
	bottom: 20px;
	background: rgba(71,163,218,0.2);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	align-items: center;
	text-align: center;
	opacity: 0;
}

Unfortunatelly that doesn’t work for mobile (android and firefox) and I don’t know why. (An actual list is shown…)

Also there has to be a more elegant way to solve this using the capabilities of X?! Sorry for being a pain… :slightly_frowning_face:

Hi there,

Actually, it seems that you did your work correctly and the CSS you used is working and I checked the case with iPhone with no problem. Using Firefox with Android is a very rare case and if you want to have that much of cross browser compatibility you need to hire a developer to follow up the case.

Here is what I see an iPhone:

Thank you.

1 Like