Support > cpg1.6 themes (visuals)
Mirror effect on thumbnails
KchoPrro:
I know that you can get a mirror effect on the thumbnails without changing the thumbnail image, manually in the hosting, for another one from PhotoShop. It would be something simple with a box-reflect function in the style of the theme.
However, box-reflect still doesn't work with Firefox (and I don't think it ever will, it's been many years and firefox doesn't implement it). Many users use Firefox (me too) and I don't want to use that style in my gallery, I would like to achieve the same effect and have it work in any browser.
Any idea how to do it? I thought I could duplicate the thumbnail images (one above and the same below) and, to the image below, apply a style to invert the image and some other adjustments so that the image above appears mirrored but I don't know how duplicate the images (and that the exact same image remains above and below, even if we are seeing the images randomly, or we move the image in the filmstrip.
I would like to get exactly what appears in the attached screenshots (mirror effect made by me in PhotoShop, replacing the original thumbnails generated by CPG)
KchoPrro:
I'm still looking for a solution for the reflection effect in the thumbnails.
Would it be possible for CPG to generate a thumbnail directly with the mirror effect? (The same thing that I do in PhotoShop, and that I later replace on my server, one by one). If CPG could do it somehow, I could regenerate all my website thumbnails in one step. ::)
ron4mac:
It could be possible to achieve the effect automatically in your theme with the use of some clever CSS.
see here and/or here
KchoPrro:
--- Quote from: ron4mac on January 11, 2023, 06:08:13 pm ---It could be possible to achieve the effect automatically in your theme with the use of some clever CSS.
see here and/or here
--- End quote ---
Thanks Ron4mac. I've seen similar examples but they all work with individual images; or adding the same image below to make it mirror effect, or using those images as backgrounds in css. how could i make the thumbnail class have a background of itself?
In the case of the examples, the result would be this:
https://codepen.io/KchoPrro/pen/GRBERGR
html
--- Code: ---<body>
<div class="reflection"></div>
</body>
--- End code ---
css
--- Code: ---body {
width:100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.reflection {
border-radius: 15px;
width: 500px;
height:333px;
position: relative;
background: url("https://www.adolfoventas.es/galeria/albums/userpics/10001/thumb__02_5832.jpg");
background-position: bottom;
background-size: cover;
box-shadow: 0px 50px 70px rgba(0,0,0,0.1),
0px 10px 10px rgba(0,0,0,0.1);
}
.reflection::after {
border-radius: 15px;
content:"";
background-image: inherit;
width:inherit;
height:40%;
position: absolute;
bottom:-42%;
transform: scaleY(-1);
background-position: bottom;
background-size: cover;
opacity: 0.8;
}
.reflection::before {
content:"";
width:inherit;
height: 42%;
position: absolute;
bottom: -42%;
background: linear-gradient(to bottom, rgba(255,255,255,0.3),white);
z-index: 1;
}
--- End code ---
I can do it with few images but doing it with the entire CPG gallery, with more than 1,000 images, is impossible. I don't know how to get each CPG thumbnail to be background. Keep investigating ;)
The truth is that the box-reflect effect would be perfect if it worked in Firefox, I just have to add it to the thumbnail class (and some other things), and my problem would be solved. :'(
BusAmerica:
Hello Kchoprro
I'm looking at the site and it looks like you made it
You did?
At the same time I see that the theme used is Monica's and responsive. In another post you made reference to not wanting to abandon the "Chaoticsoul theme", did you abandon it? I never used it, so I don't know what it looked like, but I guess it wasn't responsive.
I am looking for a "responsive theme" and to see how to implement this mirror effect.
I hope you can answer me
Regards
************************
Hola Kchoprro
Estoy viendo el sitio y pareciera que lo lograste
¿Lo lograste?
A la vez veo que el tema usado es de Monica y responsivo. En otro post hacías referencia a no querer abandonar el tema Chaoticsoul ¿lo abanonaste? Nunca lo usé, así que no se como se veía, pero estimo no era responsivo.
Estoy a la busqueda de un "thema responsivo" y de ver de implementar ese efecto espejo.
Ojalá puedas responderme
Saludos
Navigation
[0] Message Index
[#] Next page
Go to full version