helloo, i just wanted to thank you for your great work! first of all there aren't many tutorials out there for cargo, and secondly you even explain some css stuff, i love it!! it is super helpful.
@melaniealpach6734
4 ай бұрын
Hello, thank you very much for this tutorial! The effect works well for me but I was wondering if there was a "color" filter in addition to the entire list of filters offered. I'm trying to change the effect to blue but I can't find a filter that would allow me to put a color on it. Thank you very much if you have the answer!
@xiuweb
4 ай бұрын
there is no such filter, but you can use filter: hue-rotate(-70deg) (change the value) + create an overlaying element with a half transparent blue background. The element can be created using "::after" of "::before" preudoclass (see my other videos)
@melaniealpach6734
4 ай бұрын
@@xiuweb thank you very much for your answer! I’ll check your other videos too ☺️
@shortssss868
9 ай бұрын
Great tutorial again! As an extra layer on this tutorial: I'd like to see a tutorial on how to make a title or logo appear when hovering over the image. Thanks a lot!
@xiuweb
9 ай бұрын
nice, I'll make it next
@ericpieper3547
5 ай бұрын
This worked great for me - thanks so much! I really appreciate the time that you've committed to helping solve some of the issues/questions that seem to be common with Cargo 3. * I've got an additional question on this topic: I turned all my images to grayscale, which reveals full color on hover. Works like a charm (thanks to you). But the background of my site is a slight cream color - not pure white - and I want to 'multiply' my image so that some of that warm cream tone shows through the grayscale image. I've found little snippets of CSS that address the ability to use a multiply blend....but I can't get it to work alongside your grayscale filter process. If you're able to help out - I'd looooove it - thanks!!
@xiuweb
5 ай бұрын
try to use mix-bland-mode instead of filter, or reduce opacity (like you can keep the filter, but add opacity: 0.5)
@ericpieper3547
5 ай бұрын
@@xiuweb I also found that I was able to change the Layering Effect (on the Local Page Settings) to Multiply...which actually does exactly what I was wanting it to do! Granted - it does make the full color photo multiplied as well - bit since my website background cream is so light - this does not bother me :)
@wanthanee5406
6 ай бұрын
Thank you so much!!
@amirataneja
5 ай бұрын
Hey! Your tutorials are so great thank you for the work you do! Wondering if you can confirm there is a way to rotate images on hover in image galleries?
@xiuweb
5 ай бұрын
yes, use transform: rotate(45deg); for 'media-item' selector and it should work
@cptnvg
7 ай бұрын
thanks for the tips! can these effects be applied on page thumbnail index? adding to thumbnail styles in the main css isn't working for me.
@xiuweb
7 ай бұрын
if you want to apply this effect to all thumbs of your website, you can simply use thumb_image selector. Example: .thumb_image { filter: blur(5px); }
@AndresBruck
8 ай бұрын
im trying to combine your 2 latest tutorials, getting the image to change on hover with filter but keeping the caption intact, but it affects both, is there a way this could be avoided ? thanks in advance
@AndresBruck
8 ай бұрын
i achieved this by applying media-item::part(media) , thanks !
@xiuweb
8 ай бұрын
Cool! I didn't have time to find a solution myself and the ones I tried didn't work. Great that you've found it!@@AndresBruck
@craftmallow
8 ай бұрын
@@AndresBruck Hi there! I tried out your solution and it works! So thanks for commenting this. However, I am now having an issue with the [blur] filter not applying over the image when hovering over the caption (the filter only applies when I hover over the parts of the image not overlaid with text). I understand why this is happening, but I am not sure how to fix it... I am assuming you ran into this issue as well and was wondering if you found a fix! Thank you
@AndresBruck
8 ай бұрын
hi @@craftmallow ! i didn't notice this issue because i use a very small caption on the bottom corner, so i wasn't hovering the pointer over the caption. i tried to reproduce what you mention by making the caption bigger and had the same problem, no idea how to fix, let us know if you find a solution!
@clementinaaltube2204
7 ай бұрын
I have a problem where the effects apply to all items in the gallery thumbnail index. If I hover on one image, it interprets the over as being on "all thumbnails", so the effect happens to all images at the same time, instead of only the one I am hovering over. Is there a way to address only one image at a time? Also, thank you for your tutorials! They're great
@xiuweb
7 ай бұрын
this code is not for thumbnail index, it's doesn't work the same way as galleries. check the html structure with Inspect panel and you will see which selectors you need to use instead (requires some basic css/html knowledge)
@AndresBruck
8 ай бұрын
thanks again! is there a way for the image to blur but keep the borders in focus ? so the box keeps the same aspect
@xiuweb
8 ай бұрын
you can try to wrap the image in a new div with "wrapper" class. css will be: .wrapper { overflow: hidden; display: inline-block;} .wrapper > * {transform: scale(1.1);}. It will cut the image inside of the box a little, and it won't work correctly with captions, but that's what you can try
Пікірлер: 24