Thanks for the reply.
I have tried it another way using html and css
Seems working but I would like to make some adjustments.
1
Would like the second row to align at the top column and the row above align at the bottom of the column. In this way one block of eight images will be the result. How can I realize that.
2
Can I also make an opposite hoever-effect? So starting with the transparant image and text and showing the ‘normal’ blue picture at hover?
Thanks in advance.
Screendump:
Code I used:
HTML
CSS
.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #ea8a00;
}
.container:hover .overlay {
opacity: 0.8;
}
.text {
color: white;
font-size: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}