Im using Block 1.2 and have a collage view. I have added overlay on the background of an container.
That works good.
But i cant find any hover-settings for this so i can make the overlay removed when hovering an container with the image with overlay.
In css i see that the overlay is an linear gradient to the image. but is there any way to override this linear gradient with an hover?
(linear-gradient(rgba( 0, 0, 0, 0.37 ),rgba( 0, 0, 0, 0.37 )), rgba( 0, 0, 0, 0.37) url(hidden link) center center no-repeat;)
I have also tried this approtch.
I gave the loop-item an own class. and try to add a background with opacity on it , but it dont shows up..
.pk_bg_collage:before{
background-color: #000;
opacity: 0.4;
}
.pk_bg_collage:hover:before {
opacity: 0;
}
Hello and thank you for contacting the Toolset support.
I am afraid, I am not sure to understand what you are trying to achieve, is it a hover effect on the hole view/collage, or a hover effect on the elements of the collage?
Can you share a link where we can see your page? Or allow me temporary access to your admin area to check it closely? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
hi,
Yes. i have black overlay (www2.jpg) on every item in the collage, not the whole collage. every background-image has an overlay set in the the Background-tab in admin.
So, when i hover the item, the overlay get full transparancy. or removed in front-end.
Thank you for these details. But I'll still need a closer look, both at the frontend results and at the view definition in the block editor.
If you are unable to share credentials to your website, I can create a test server on our platform and we can work on it until we get this resolved, sounds good?
I am afraid, I do not understand what you are trying to achieve, especially with your CSS sample code. I do not see why styling the pseudo-element "before"?
Why not styling the container directly:
.pk_bg_collage{
/* container styles */
}
.pk_bg_collage:hover{
/*container onhover styles */
}
Can you please elaborate a bit more? And remember that the color of the container will be hidden by the background image unless the image has transparent parts or is not taking all the surface of the container.
Its very simple what i like to do. i thing you make it more difficult to understand than i ment it o be. or im very bad to explain 🙂
I like the overlay to vanish, disapare when hover.
I have tried your solution, does not work.
thats why i tried to use the background settings in the BLock admin. and then try to remove the overlay by hover. Does not work.
"Before" i use so the background is in front of the background image.
I have done this on other elements on the page, but its not working on toolset blocks.
.pk_bg_collage:before{
background-color: #000;
opacity: 0.4;
}
.pk_bg_collage:hover:before {
opacity: 0;
}
Thank you for your feedback. I must confess, that I am not very skilled in CSS. My colleague Christian suggested to use the following CSS code, I hope it will help.
.pk_bg_collage:before{
background-color: #000;
opacity: 0.4;
display:block;
content: ''; /* <== This is important for the overlay to appear */
height:100%;
width:100%;
}
.pk_bg_collage:hover:before {
opacity: 0;
}
Would you please test it and let me know what do you think?
Hi again, and thank you
I did try that also yesterday and thats not a great approatch because its overlyas the text, also.
The white text gets an overlay also 🙂
I have also tried a different z-index to make text stay on top. And finaly i got it to work.
The thing with the class, it seams not to be added to all items ?
As you can se if you check the page, only the biggest images get the overlay?
i can also se that the overlay from your code only is applied to the two biggest items (? strange) (12345.jpg)
and theres a dirrefent padding from the first and the bottom image (1234.jpg)
Thats why i needed to contact you to both show you that its hard to accompish and maybe someone else need the same hover-solution.
the best thing would be if the background stayed in one div and the linear-gradient in an own.
now in your setting its nested.
if it was not nested, this would be very easy to accomplish. 🙂
I believe the issue is with the pseudo-element "before" height. It is 0px for all other collage elements. It can be fixed by setting its position to absolute inside a parent with a relative position. The code will be:
.pk_bg_collage {
position: relative;
}
.pk_bg_collage:before {
background-color: #000;
display: block;
content: '';
height: 100%;
width: 100%;
opacity: 0.4;
position: absolute;
}
.pk_bg_collage:hover:before {
opacity: 0;
}
It seems to work on chrome. Would you like to test it?
For more details, check these online questions:
- https://stackoverflow.com/questions/26449590/make-css-pseudoelement-before-same-height-as-main-element/26449654
- https://stackoverflow.com/questions/22001015/height-100-on-before-is-it-possible
