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!!