Hover image over Text (html/css for Cargo Collective)

[@michaelmordecai7195]

Finally found someone to help with Cargo. Fantastic!

[@xiuweb]

💕

[@Yuwdy]

Hey just want to say thank you for this! I've subscribed. You're dope

[@user-uk7mj6gg7w]

I think your tutorial is cool and very helpful. Non coder here, this helps a lot. Thank you.

[@flat9074]

You sir, are truly my life savior

[@xiuweb]

💕

[@yazzinna]

Would love a tutorial on this for Cargo 3 😭

[@JOEYXU3790]

hi there, thank you for this tutorial. But it seems that cargo 2 Show an Image on Hover code is no longer working on cargo 3? can you please have a tutorial for cargo 3? thank you so much

[@nayraaly9731]

amazing guide but I have a question, How can I make the image stay after unhovering?

[@xiuweb]

it's not possible with css only, you need some js, which is out if this video scope. but if you really want to know: you need to listen a mouseenter event on each element, which will trigger a function that adds a new class to the target element. this class will reset the style that was hiding the image.

[@nayraaly9731]

@@xiuweb Is there a possibility to provide that in code? I have tried everything and can't get it to work, and cargo doesn't allow me to add js :/, it cancels it out everytime I try to add it. THANK YOU!!!

[@yoma.emptylands]

thanks you for this tutorial, I would really appreciate a mini tutorial on how to add the grid - thanks in advance

[@estelles.4020]

@XIU WEB really amazing tutorial. I wonder if it can works for changing the background image of an only one circle with a fixed position at the right ? I don't know if I'm clear. TYVM for this tuto

[@xiuweb]

It's possible, but the code will a bit different. you need to specify css of this image a lot, and preload it somehow. I guess I can make a video of similar effect, but not in the nearest time

[@dabzvapelord]

this is so helpful. hopefully i can make it work.

[@sergiolego2001]

Great video, love your worrrkkkkk

[@george_mowlam]

Hey thanks so much for the tutorial, Im just wondering if you'd be able to help me out with creating this effect but the images would be a full screen width background? And also the image will disappear when the cursor is off the word.

[@xiuweb]

you can set position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;

[@madsvagnjacobsen2799]

Hey, thx for the great tutorials! It works all wellfor me when im editing in cargo, but when i view it on the actual websites the images pop up with a delay and a transistion, which is really annoying. Any clue on making it appear instant?

[@xiuweb]

You can try to compress the image to be lighter, so it can be loaded faster. Try any online image compressor and use jpg or jpeg instead of png. Try to keep it under 500kb per image. You also can try to find some preloading scripts for the images, yet it can be a bit tricky to explain or implement

[@olaolastudio]

THANK YOU SOOOO MUCH!!!!

[@samuelsabastine]

Thank you

[@franciscaamorimalves8148]

thank you so much for the video, that was very helpful, and exactly what I was looking for! In my case, I would like to make a variation for the mobile version-is it possible to make the images show while pressing the text? or make them just visible on responsive?

[@xiuweb]

Yes, you can achieve it using @media screen (I have another video about mobile adaptation here, you will find some info of how to use it there). You just need to make this images invisible (using display: none; or opacity: 0;), and then change these CSS on mobile using @media screen, like: @media screen and (max-width: 770px) { .element {display: block;}}

[@sarasmokrovich3550]

Hi thanks so much for your help! It works perfectly and is exactly what I was looking for. I do have one question - is it possible to keep the text on the same line but have it linked to different images? Right now when I try to copy and paste the effect it only allows for it to work with a line break.

[@xiuweb]

Hi! Yes, add a new class to each link (let's say class="inline"). And then add these lines to your CSS panel: .inline { display: inline-block !important; } It should work. If not - text me again :)

[@sarasmokrovich3550]

@@xiuweb works perfectly thank you!

[@kristenchon1174]

Hi this was really helpful and I'm so close to getting it working like this, but am having trouble knowing where to add the (class="inline") if my text is under a tag then a tag, do I just add another class to contain both of them? Thank you so much

[@xiuweb]

@@kristenchon1174 I need to see the whole structure to say for sure, but you can try to add it to first, and to next and see which one works :)

[@siathomas4807]

Hi there, thank you so much for such a helpful tutorial! I am having an issue where my hover image is displayed over the text rather than under like in your video - do you know of any solutions? thanks again :))

[@aliciaanliliu]

Love this one! I was wondering if you could do a tutorial on revealing a text while hovering on an image? (the text caption would follow with mouse) I was trying to figure it out but it was hard and I used gallery template for images..

[@xiuweb]

Sometimes it's not possible to add new tags to gallery elements, so only one solution is to recreate the gallery manually. But it's possible to apply code to tables. So if they can be used instead of gallery, the principal will be the same as in this video. Anyway, thanks for an idea, I think I definitely should share this thing

[@aliciaanliliu]

@@xiuweb Really look forward to see your new contents!

[@emanuelepesa578]

How could you apply that to the 3 columns layout you've designed in the last second of the video? If I do that and I apply it to a grid it doesn't work!

[@xiuweb]

Because you add classes to wrong elements obviously. Check the structure of your code, there should be the same logic. Or try creating the first column of elements first, add this hover effect, then select it all and press "grid" button to create other columns. Or you can create each row as a new grid (also creating the first element first, and then copy it multiple times).

[@3seater]

Great tutorial! How do I do this so when I open it on mobile the image is responsive. Right now the image is huge and off the screen on mobile version.

[@xiuweb]

I have another videos about resizing images and mobile adaptations. It's hard to explain in 2 words, but you may find these videos helpful.

[@3seater]

@@xiuweb Okay thank you!

[@mateotevamartinand1638]

Hi, I'm interested in having a tutorial on how to do this but on a grid as you said. It is the same grid as in the exemple, my grid is all set but I'm struggling in editing the code, everything looks different. Thank you.

[@xiuweb]

I can recommend to create an empty grid and found the place where you need to paste smth to fill in a certain column. Grids usually have very simple structure: one tag for a wrapper and one tag for each column. So all you need is to paste the code from this tutorial into a column (inside of this column tag).

[@jonathanbrioschi]

Hey, great tutorial! how would you add a text hover effect over thumbnail images?

[@ChaeYeonPark-ns5ok]

Is there a way to center image in the page?

[@xanthecopeland9257]

yes I am wondering the same. I want to set a fixed position of my hover images rather than in relation to the word link.

[@claireyuanzhuang3710]

Hi XIU! Thank you very much for making this tutorial! SUPER HELPFUL! I was wondering how I can make the image appear in the middle of the screen so it will be a dynamic web page.

[@xiuweb]

try to use "position:fixed;" instead of absolute for an image. You also can control it's placement using "calc", like: "top: calc(50% - 200px);" (if your image height is 400px)

[@claireyuanzhuang3710]

@@xiuweb Good idea👍👍👍

[@claireyuanzhuang3710]

@@xiuweb very smart 👍👍👍

[@lenny5666]

Hey ! I tried it and it work when im in editing mode but when i close it it seems not to work. Do you have an idea why it is not working ? Love your work !

[@xiuweb]

Hi! Most likely there is some syntax mistakes. Check your code here: validator.w3.org/nu/#textarea Check html as well, you might forget to close some tags

[@PaolaRodriguezMunoz]

Hi, thank you for the help! I used the codes to hover over a button and an image will appear but it also appears on the white space on the left and right of the button. Is there a way to only make it appear only on top the button and not on the whole column?

[@xiuweb]

Hi! I need to see this html part to say for sure

[@comfyyyboyyy]

Hi Xiu thank you for the tutorial, but it's possible make the hover responsible ?

[@xiuweb]

Hi! You mean change its position on mobile devices or something?

[@comfyyyboyyy]

​@@xiuwebYes because in the mobile version the position of the image doesn't change and go out from the view. Example drive.google.com/drive/folders/1rBdT5cJZ5WlgBAXkY2LFaKUTvmSsL1CN?usp=share_link

[@aidaalvarez5209]

Hi! I was able to do this but my images are animating in instead of the instant pop up effect that you have in the video. Any help?

[@xiuweb]

That sounds weird. I can have a look if you want. Text me in Instagram (@xiu_web)

[@aidaalvarez5209]

@@xiuweb just sent. thank you so so much

[@remigatteaux7393]

Hey nice tutorial but i've tried maybe 15 time to make the same things that you and the image never appear... I search since 5 hours where is the problem but i've no response, could you help me please ? I can moove the image of place in CSS, can make disappear the image but never reappear and i've tried in 2 white page different to be sure that's note the white page the problem

[@xiuweb]

It's hard to tell what the problem is. Probably some synthesis error. Show me the code and I'll try to help (inst: xiu_web)

[@emmakentzinger6897]

hey thanks for the video ! I just have a question. When I try to link my text, the hover image effect doesn't work anymore :( really annoying bc I'd like to make an index... do you know how to fix it ? thanks a lot

[@xiuweb]

It happens because Cargo adds tag and it can ruin the structure. When I add a link to each element, the hover works. Here is how it's supposed to be (so you need tag to be placed the same way): MBZ 2021 {image 1 scale="28"}

[@cristinaguerrero4681]

Hi! Thanks for the video tutorial, it was super helpful!!! I have used "the image of a text" as a hover image of another text and appears next to a photo gallery. So, at the start and without coding, the image appears at the bottom of the page. The problem is that when adjusting to screen sizes, it hovers in wrong places where is not visible and scales which makes it not readable. Is there any way to avoid that it scales. Also, can I place it in relation to the center of the screen instead of the original position? I hope it makes sense! Thank you so much

[@HedvigAgren]

Hiii thank you so much, how do ypu make this in a grid? super helpful tutorial

[@HedvigAgren]

I got it!! 😍 but wondering how I get the images to go over ALL the text in a grid and not only over the one that is hovering? thank youuuu❤‍🔥

[@Eelis-rc6ho]

Hey hey, super nice tutorial! thank you so much for uploading! do you also have experience with png (with transparent parts) and mix-blend-mode in cargo? I am stuck with this atm.

[@xiuweb]

I have a video about "mix-blend-mode", but it covers only some particular tricks. But what's about png?

[@xaviermadden4076]

Hey, thanks for your tutorials! I have follow a few now for my website :) I was just wondering if it is possible to scale the images from their centre point? At the moment the images always see to scale from their top left corner . Thank you!!

[@xaviermadden4076]

I started using the image structure from this as it gave more control over the image kzbin.info/www/bejne/bWXdk4KurN-qerc (your other tutorial)

[@xiuweb]

There are different ways of how to achieve what you want, but all of them a bit complex and depends on a particular situation. In short: there is no easy way how to do that just with some lines of code. Maybe it's even better to change your page layout settings, or to recreate this page as a stack of pages (using cargo sets). In this case you will be able to set layout for each part regardless of other parts of this page.

[@xaviermadden4076]

@@xiuweb Thank you for the reply!

[@wildbageloo]

Hi thanks for the tutorial!!!! 🥰 I have one question, how can I see the name of the image, "image 1""image 2""image 3",when I hover the image nothing come out😅Is there other way to see the name? Otherwise I can't change the image name in the code...

[@wildbageloo]

I got it. haha😄

[@nicolegarcia4963]

hi. Is it possible to have continuous text and do this? meaning within a paragraph the hover would work for different words?

[@xiuweb]

Yes, it is possible, but with some corrections. First of all you need to use tag to select your word. the image you should put inside this tag as well (like aside of the word). The principal remains the same.

[@nicolegarcia4963]

@@xiuweb it worked! thank you so much

[@kaitselu529]

Thanks for the tutorial! I have the same issue, but I just couldn't quite figure it out. Is it possible for you to write a short demonstrating code, @xiuweb?

[@nicolamitchell9590]

hello do you know if it possible to make the image a link on hover?

[@xiuweb]

you can use Cargo tools for that. Just select an image and click "link" button on the right bottom corner. If you add a link at the end (after all other things like this animation are done), it shouldn't ruin the structure.

[@emmatremoulet4715]

Hi, thank you for the video it helped me a lot, I have one question, this text is like a list, how do you make the titles form a "line" ? I don't know if that is clear :) thank you

[@xiuweb]

Hi! There are several ways how to do that. The most close to this video is adding "display: inline-block;" to your im_wrapper css :)

[@emmatremoulet4715]

@@xiuweb thank you very much for your answer ! I am going to try it :)

[@emmatremoulet4715]

@@xiuweb Last question, how do you make the images to stay at the exact same place ?

[@xiuweb]

@@emmatremoulet4715 try to remove "position: relative;" property from im_wrapper