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

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 พ.ย. 2024

ความคิดเห็น • 27

  • @SneakyMex
    @SneakyMex 23 วันที่ผ่านมา +1

    I would pay for your lessons. You're definitely the best on here. Thank you!

  • @eth3rette
    @eth3rette 7 หลายเดือนก่อน +2

    this is exactly what i’ve been looking for thank youuuuu

  • @waxmaster-c
    @waxmaster-c 7 หลายเดือนก่อน +1

    Thank you for making Cargo videos!!!

  • @AlejandroCardenas-nj1bk
    @AlejandroCardenas-nj1bk 6 หลายเดือนก่อน +1

    We miss your Cargo Videos Xiu! Greetings

  • @FlixTheTroller
    @FlixTheTroller 4 หลายเดือนก่อน +2

    Hello! Is it possible to have an horizontal page? That instead of scrolling down it scrolls to the right, with the mouse wheel. I would love a video of that...

  • @cobaltblue00
    @cobaltblue00 7 หลายเดือนก่อน +1

    I love your Video !

  • @jackylegss
    @jackylegss 6 หลายเดือนก่อน +1

    Hello :) Great tutorial thanks so much! Just one question - I am trying to do the effect in the nav bar but it won't work, is there anything different I'd need to do?

    • @xiuweb
      @xiuweb  6 หลายเดือนก่อน

      it should be similar, you can try the same code on other page, and if it won't work, try to find a typo. of no, it might be a z-index issue. try to increase it

  • @fastommee
    @fastommee 5 หลายเดือนก่อน

    Super! Do you think would be possibile to show multiple images on just a single line of text hovered? And also I'm wandering how to place them in random spots in the page! Thanks as always for your tutorials:)

    • @xiuweb
      @xiuweb  5 หลายเดือนก่อน

      Yes, you can add as many images one after another as you want an specify different classes for them. Then you need to write all these styles for each image, but change position values (top/bottom, left/right) to be different. You'd have to set the position for each image yourself to make them look "randomly" placed.

  • @isaree3787
    @isaree3787 7 หลายเดือนก่อน +1

    Hello, can you please also do the thumbnails swapping image hover on cargo3 please. I have already saw your vid for cargo2 it is very helpful but sadly doesn't work with there version3.

  • @Xyreqa
    @Xyreqa 2 หลายเดือนก่อน

    the hoverable text i have is part of a marquee, any way to have the image not move alongside the marquee and instead remain fixed to the centre of the page?

  • @maro7837
    @maro7837 2 หลายเดือนก่อน

    I have two fonts which are the same size and line height. However, when I try to put them on the same line, it always causes a line break. I don't want this to be the case as one of them is supposed to indicate that there is a hyperlink. Is there a workaround this?

  • @gracey_wacey
    @gracey_wacey 7 หลายเดือนก่อน

    Hi, I'm having trouble getting the images to appear as the mouse moves along, the images appear as the mouse hovers but are fixed in one place on the webpage unlike in the video where it follows the mouse and the corresponding image appears. Is there something I should add to the CSS?

    • @xiuweb
      @xiuweb  7 หลายเดือนก่อน

      I think there must be a typo somewhere, check your code and compare it to mine. If everything is the same, it should act the same too

  • @julesferrini
    @julesferrini 7 หลายเดือนก่อน

    Thanks ! How can i make it responsive with mobile ?

    • @xiuweb
      @xiuweb  7 หลายเดือนก่อน

      check my other videos, I'm explaining there how you can write styles that will be valid for mobile devices only. in short - you can add body.mobile in front of any css selector and write the styles that will rewrite the desktop ones

    • @xiuweb
      @xiuweb  7 หลายเดือนก่อน

      or you can hide hover wrapping all hover rules into @media (hover: hover) { .... } to make them work only on devices that support hover (if you want to prevent hover from happening on mobile)

    • @MikeTVMedia
      @MikeTVMedia 4 หลายเดือนก่อน

      Which video outlines this? I want to change the hover on desktop into an image gallery on mobile but can’t adapt the code for mobile

    • @xiuweb
      @xiuweb  4 หลายเดือนก่อน

      @@MikeTVMedia I think you can make two pinned pages with different settings "show on mobile" and "show on desktop" for this situation. It will be easier that learn how media query works in css

    • @xiuweb
      @xiuweb  4 หลายเดือนก่อน

      @@MikeTVMedia but this is the video about mobile css: th-cam.com/video/C9rIoGkQUWw/w-d-xo.htmlsi=FCwBWFAbYerFEV1A

  • @sofiamusolaslopez
    @sofiamusolaslopez 6 หลายเดือนก่อน

    Hi, i hope you can help me, i have follwed everything but when i pass the mouse nothing happens.. but i just began using cargo so i really dont understand it

    • @xiuweb
      @xiuweb  5 หลายเดือนก่อน

      In most cases there is a typo in the code, or the case is not 100% as it's shown in the video. I think you need to check the code once again first

  • @Xavier-xo3xb
    @Xavier-xo3xb 6 หลายเดือนก่อน

    I tried to do z-index 1; to achieve image in front of text. It's not working. My position is absolute. Any suggestions?

    • @xiuweb
      @xiuweb  6 หลายเดือนก่อน +1

      Try values more than 1

    • @Xavier-xo3xb
      @Xavier-xo3xb 6 หลายเดือนก่อน

      @@xiuweb I did, I also set my text z-index -1. Same issue.

    • @xiuweb
      @xiuweb  6 หลายเดือนก่อน

      @@Xavier-xo3xb I'm pretty sure this thing can be solved with z-index. send me the link, I'll have a look.