The short answer is: no.
The zoom effect is achieved by scaling some elements with a very thick border and a large border-radius, which are positioned above the images.
Unfortunately, border-color does not allow a value of transparent. Yet. So, basically, you need to match the color of .round-div border with the color of the background.
I was thinking, instead of trying to make it transparent (which is not possible – OK), can I use the same pattern as a background for the featured image? If this is possible then I don’t need to see the sitewide background – I will just overlay it with the same pattern in the area of the white square and will achieve the same result.
If you figure out something, please, put the full snippet.
Thanks!
Currently, in CSS, you cannot specify an image as border. Even if you could, you’d have positioning problems. Your only practical solution is to create some sort of frame for your featured pages block, with a solid background, if you want the rest of the page to have an image/pattern background. I did something similar on http://websiter.ro.
It is difficult to believe but I managed to use an image as a border! I use the following CSS:
.round-div {
border-image-source: url(wp-content/uploads/2014/06/foggy_birds.png);
border-image-slice: 30 30 30 30;
border-image-repeat: repeat;
}
Still, I have two issues remaining:
1. The zoom became square instead of circle. Square looks fine too but I prefer circle.
2. The border image looks magnified compared with the sitewide background. I would like to tile it just like the sitewide background.
I saved the current solution and it can be seen here: http://heartandsun.org
I am afraid this is the limit of my skills. If somebody can complete the snippet I would be very grateful!
There is no support for border-image (and it’s family: source|slice|width|outset) in IE 10 and lower, as well as in Opera. I was assuming you needed a cross-browser solution.
Scroll down to browser support.
We’re talking about over 40% of internet users here.
