Image Hover Effect in Google Sites - This is how to do it!

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

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

  • @FlippedClassroomTutorials
    @FlippedClassroomTutorials  2 ปีที่แล้ว +4

    💡📚 Everything teachers need to know about Google Sites: th-cam.com/video/UB95qRTp_R0/w-d-xo.html

  • @stephaniedraudt4784
    @stephaniedraudt4784 3 ปีที่แล้ว +1

    I've watched some of your videos and I've loved them, this one made me a subscriber! Thank you so much.

  • @ruygranja
    @ruygranja 4 ปีที่แล้ว +4

    Thank you for helping us with your videos!
    Please keep doing it.
    I am starting to enjoy Google Sites. ;-)
    Happy New Year!
    Warm regards from Portugal.
    Rui

  • @aizad786iqbal
    @aizad786iqbal 4 ปีที่แล้ว +1

    Thanks for this, wasn't exactly what I needed but it gave me an idea on how to workaround what I wanted to do hopefully that'll work..

  • @xenabellarosepoolreedzilla4405
    @xenabellarosepoolreedzilla4405 2 ปีที่แล้ว +1

    Thank you for this video! it'll be time before i can try this out, but thank you very much sir!

  • @Random-gm7ny
    @Random-gm7ny 4 ปีที่แล้ว +11

    Great videos... Can you do one on how to create members only section of the site? This kind of video would be very very high in demand.

  • @AliAli-jv3sx
    @AliAli-jv3sx 4 ปีที่แล้ว

    happy new year Sir thank you for your help .
    i like google site more now because you made it possible .
    thank you

  • @kensleylewis
    @kensleylewis 29 วันที่ผ่านมา +1

    who said you can't use custom CSS in Google Sites? - Nice work!

  • @jaisonjoseph9292
    @jaisonjoseph9292 ปีที่แล้ว

    Just what I needed at the moment.👍

  • @chrissygregory2892
    @chrissygregory2892 ปีที่แล้ว

    Awesome video, thank you! Do you have any videos on this hovering effect that will work on mobile devices as well; adding a media source maybe?

  • @pranavsairam1228
    @pranavsairam1228 3 ปีที่แล้ว +2

    Thank you so much for this tutorial. Do you know if you can add hyperlinks to the hovering images?

  • @joelkadhir4529
    @joelkadhir4529 4 ปีที่แล้ว +13

    Hi, can I use that image as a button? Where in the code should I put the link?

  • @muhammadsafdar1423
    @muhammadsafdar1423 ปีที่แล้ว +1

    Very Very Informative, Thanks

  • @amytzsharma369
    @amytzsharma369 3 ปีที่แล้ว +1

    You're awesome
    Thank you so much

  • @lynettesmithmusic3223
    @lynettesmithmusic3223 4 ปีที่แล้ว +1

    Thanks for the vid - really helpful. Wondering how one might do the same hover but with a word eg. image hover, image fade to a word 'About'?

  • @MortenCopenhagen
    @MortenCopenhagen 4 ปีที่แล้ว +2

    This is something I have looked for for a while. Thanks a million. PS. You may want to make it more clear that this works on Google new sites. Cheers

    • @FlippedClassroomTutorials
      @FlippedClassroomTutorials  4 ปีที่แล้ว

      Thank you for your feedback. I agree that the fact they still use NEW Google Sites after all this time is somewhat confusing haha. Classic Sites will eventually stop working when the move to New Google Sites is complete. Here's a link to a great overview of the functionality in both: support.google.com/sites/answer/7176163?hl=en

  • @eclecticvillas7806
    @eclecticvillas7806 4 ปีที่แล้ว +1

    Thanks so much for this video... You've helped us out heaps... We used an icon as a background image and then a same sized hover image to display the icon in text however the only thing we're finding is that the hover image is super slow to display/load... Both file sizes are very small and my internet speed is 20mps... Have we done something wrong with HTML code?... Or is this just to be expected from Google Sites?... Thanks again for an awesome tutorial... :)

  • @Hosslikw
    @Hosslikw ปีที่แล้ว +7

    Sorry I must be doing something incorrectly even with your amazingly supportive explanation. When I embed the code into my google site the images dont appear. I noticed that the linked code of the image I have is different than what you were given. Any ideas?

  • @yomommastupid
    @yomommastupid ปีที่แล้ว +1

    Thanks for the tip. I find it a bit tedious because I sell products on my site and it takes too long to edit the right picture size. What I want to know is what is the exact size of the content blocks you can add to the site ranging from small, medium to large, to whatever size you want...but the standard blocks (image frames) what are dimensions?

  • @deborahkomatsu5446
    @deborahkomatsu5446 ปีที่แล้ว

    Rad. This is just what I was looking for.

  • @jaja_nouvelle4435
    @jaja_nouvelle4435 2 ปีที่แล้ว +1

    Hello! Thank you so much for this video!
    I'd like to ask if it is possible to apply the interactive cursor effect on Google sites? Thank you!

  • @sangay2019
    @sangay2019 4 ปีที่แล้ว +1

    Very thank you 😊

  • @albertoc7523
    @albertoc7523 3 ปีที่แล้ว

    Thanks for this and other trips and tricks.
    How can you add a shadow to a picture? Meaning, to make a feeling that is above the surface of the page?
    Thank you.

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

    Thank you for very detailed and very precise teaching. Would this work if the images are put inside a folder. just to keep things neat.

  • @teddyw.charawa8989
    @teddyw.charawa8989 ปีที่แล้ว

    You are Phenomenal!!

  • @jmengenharia916
    @jmengenharia916 ปีที่แล้ว

    Great video! Thank you very very much!!

  • @GMoney-B
    @GMoney-B ปีที่แล้ว

    Do you know how we might have a hover effect with a color change on text when hovering over it? I don't want it to go anywhere, it's more for aesthetics, but would I use a variation of link html such as href= with modifiers for hover colors?

  • @ipegofficial3259
    @ipegofficial3259 ปีที่แล้ว

    wow! you explained everything so well , i almost learnt how to code

  • @RaJaHi007
    @RaJaHi007 4 ปีที่แล้ว +1

    I'm setting up a site to run safer driving ebooks and advice for drivers, parents, instructors etc. Any tips on how do this?

  • @epiphanythe
    @epiphanythe 2 ปีที่แล้ว

    This got me on the right track but you didn't include the google finder link in the description, happy holidays!

  • @tony538
    @tony538 4 ปีที่แล้ว

    Great guy,I want to do my you tube Chanel , my question to you is hwo you do the fill or the card to zoom in and out on the screen, do you focus the camera in and out ?

  • @RalfSiegesmund
    @RalfSiegesmund 4 ปีที่แล้ว +5

    you will rock in 2020!!

  • @thevu.m
    @thevu.m 2 ปีที่แล้ว

    Hey thanks so muc for this tip. But is it possible to make it responsive?

  • @foxxy7017
    @foxxy7017 2 ปีที่แล้ว

    If you have more images... How do you do it??? Thanks.... Great video

  • @kensleylewis
    @kensleylewis 29 วันที่ผ่านมา

    What other properties can we take advantage of besides .card?

  • @sandorszabo2470
    @sandorszabo2470 4 ปีที่แล้ว +3

    Happy New Year!

  • @michelbartoli
    @michelbartoli 3 ปีที่แล้ว

    Hi ! Good job, I wonder how to insert a tooltip on an image ... Is it the same process ?

  • @ChessGeek1
    @ChessGeek1 3 ปีที่แล้ว +2

    I followed the steps but it doesnt show it on the site

  • @fendiyinata
    @fendiyinata 4 ปีที่แล้ว +1

    Hello...!
    May I ask, can you put ads on Google sites ...?
    If you can, you can make a video.

  • @RamaniVenkatachalam
    @RamaniVenkatachalam ปีที่แล้ว

    Thanks for your hard works sir.
    please give me good solution to make a anchor link to navigate in the SAME PAGE.for new Google sites

  • @foromalinche6001
    @foromalinche6001 4 ปีที่แล้ว +1

    great job!

  • @anshuljain9561
    @anshuljain9561 3 ปีที่แล้ว

    Can we do a shape hover over action in google slides..?
    Pls reply.

  • @virginieguilbert6547
    @virginieguilbert6547 2 ปีที่แล้ว

    Thank you for this helpfull video. Just a thing, once the hover effect created my image is not clickable anymore ans I can't add any link to it. How can I add a link to another page and kipping this HTML CODE?

  • @andreazigin6722
    @andreazigin6722 3 ปีที่แล้ว

    I have tried to embed images to my portfolio but it doesn't work. May I ask if there is any problem with url or something else? Thank you

  • @AliAli-jv3sx
    @AliAli-jv3sx 4 ปีที่แล้ว

    love to know how can i add live chat button in my site
    thank you

  • @matthub8081
    @matthub8081 4 ปีที่แล้ว +1

    You are a genius

  • @naturamancinelli5274
    @naturamancinelli5274 4 ปีที่แล้ว +1

    Hello my name is Lionel and I am from Argentina ... congratulations on the tutorials, they are very very good. I would like to know if it is possible to insert a button in an image (photo) of the page of my Google sites. Thank you.
    PS: I am using the google translator.

  • @luisantoniovelascoarriaga6940
    @luisantoniovelascoarriaga6940 3 ปีที่แล้ว

    when i share my homepage by whatssap or messenger, the logo from google sites appear, is there a way to put my logo there too?

  • @holidayaustriainfo
    @holidayaustriainfo 3 ปีที่แล้ว +1

    Hello :) Thank you for your video. I copied your code to my Google Site and it works on desktop, but on my mobile devices (iOs) it simply disappears completely. Do you know why and how to fix this? Thanks in advance :) PS: It seems like the problem could be the Google Drive link (hosted image on Google Drive) as I also tried with a hosted image on Onedrive and it displays perfectly on iOS mobile devices.

  • @tony538
    @tony538 4 ปีที่แล้ว

    If you can please show us hwo you do your videos, like hwo you do your cards and fills that you show to your audience thx

  • @maimun2000
    @maimun2000 4 ปีที่แล้ว

    Can you make a typewriter effect in Google sites like the ones in gigindia.in landing page

  • @GalaxyWolf-mx8fq
    @GalaxyWolf-mx8fq 9 หลายเดือนก่อน +1

    Every time I do what your doing the file link id I get alwyas ends with drive_link and idk how to change it or fix why I'm going wrong.... Any ideas?

  • @jerymathewcentreforadvance4370
    @jerymathewcentreforadvance4370 2 ปีที่แล้ว +1

    Hello,
    Firstly, I must appreciate the tutorials you upload on your channel. I have a question on the tutorial you have covered in this video. May I know how you created the images? I see that you have used Google Docs to do it. I used the drawing tool in docs to create my image, but how do I save it as an image?

    • @FlippedClassroomTutorials
      @FlippedClassroomTutorials  2 ปีที่แล้ว +1

      I make most of my small image in Google Drawings then export as a png which retains the transparent background

    • @jerymathewcentreforadvance4370
      @jerymathewcentreforadvance4370 2 ปีที่แล้ว

      @@FlippedClassroomTutorials Thank you. I shall certainly try that.

  • @emmaodom7201
    @emmaodom7201 2 ปีที่แล้ว

    Awesome video though I hope I can get it to work!

  • @xiu2801
    @xiu2801 11 หลายเดือนก่อน

    Hi i need some help Is there any way to make it functional? i mean, use the image with the hover but make it responsive and when you click on it take you to another page, i want to make buttons with this method but i don't know how to add the extra link to make it a button :(

  • @priyamaggarwal3009
    @priyamaggarwal3009 3 ปีที่แล้ว

    can we also link this image on hover click....plz tell

  • @emmaodom7201
    @emmaodom7201 2 ปีที่แล้ว

    The code isnt working for me - is it possible google updated the url syntax?

  • @shaktibansingh2779
    @shaktibansingh2779 4 ปีที่แล้ว +1

    Awesome tips and tricks your content is simple awesome. I also wanted to redirect users to a link when clicked on the hovering image. How to do so ?
    I know i have to insert an href tag but where in the html code should i put it

    • @sae-institute
      @sae-institute 3 ปีที่แล้ว +2

      Very good question - also trying to solve this.

    • @rusasod
      @rusasod ปีที่แล้ว

      @@sae-institute did you end up figuring it out? (Facing the same challenge)

  • @mbmotz7865
    @mbmotz7865 4 ปีที่แล้ว

    You are brilliant. But I hate to admit this is way over my head! I hope you take your knowledge and make this into a user-friendly add-on available on Google Slides Add-ons...

  • @donnanatson881
    @donnanatson881 2 ปีที่แล้ว

    Thanks so much for this. What if you want to add a link to the hover? Where would I add that to the code? Thank you.

  • @clovalley5875
    @clovalley5875 2 ปีที่แล้ว

    For some reason the second image just never registers as a link. I'm following all the same steps, it just didn't work for some unknown reason.

  • @diogoguilherme8293
    @diogoguilherme8293 4 ปีที่แล้ว +6

    Hey.. I followed all the steps and it didn't work for my Google Sites :(

    • @joebiscuit
      @joebiscuit 3 ปีที่แล้ว +2

      Same here :/

    • @jmengenharia916
      @jmengenharia916 ปีที่แล้ว

      I know you sent this a long time ago, but if there is someone who couldn't do it, here's one solution: Go to chatgpt, paste your code and ask what is wrong with it. My mistake was that I typed something wrong and ChatGPT told me. Hope I helped!

  • @KawsikRoy
    @KawsikRoy 4 ปีที่แล้ว

    Hi Sethi, Have you tried this on Brave Browser? I tried and Embed Code does not show anything but loading forever. I've found that 'Brave Browser Shield' causes that problem.
    Thanks.

    • @ezekielogundepo1015
      @ezekielogundepo1015 4 ปีที่แล้ว +1

      Check this support.google.com/sites/thread/18636314?hl=en

  • @muhammadaleemkhan4011
    @muhammadaleemkhan4011 4 ปีที่แล้ว +2

  • @christophecaloz5591
    @christophecaloz5591 4 ปีที่แล้ว

    How can one insert anchors in a given page for proper navigation within it?

    • @FlippedClassroomTutorials
      @FlippedClassroomTutorials  4 ปีที่แล้ว

      Hi, I touch on that at the 15min Mark in this video; th-cam.com/video/cjsoX5Md4Y8/w-d-xo.html hope it helps

  • @user-tm1qm5sp8k
    @user-tm1qm5sp8k 4 หลายเดือนก่อน

    Unfortunately it no longer works today!? is there another solution?

  • @MortenCopenhagen
    @MortenCopenhagen 4 ปีที่แล้ว

    Another thing: How does this play out on touch screens. How do you hover without touching? I noticed this normally works well on Android where single tap works like hover. But on IOS it simply does not work. Any tips?

    • @FlippedClassroomTutorials
      @FlippedClassroomTutorials  4 ปีที่แล้ว

      Yes, using embed code is far from ideal. It's one of those things we will hopefully get as a native option soon, but in the meantime we have to do it with this workaround.

  • @normanpunsal6586
    @normanpunsal6586 2 ปีที่แล้ว

    Hello do you know why this does not work on Safari browser? It works on chrome and firefox and IE but not Safari. Any help is much appreciated

    • @Lampot
      @Lampot ปีที่แล้ว

      Safari does not use google

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

    Why is not work on my google sites? The image not shows when i'am copy thw embes code😭

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

    the link to the full code for CSS and HTML does not work

  • @andrevandermerwe940
    @andrevandermerwe940 2 ปีที่แล้ว

    Is it possible to have this functionality on Google Slides?

  • @suparmanelmizan
    @suparmanelmizan 4 ปีที่แล้ว +1

    Nice hack!

  • @StellatheSLT
    @StellatheSLT 8 หลายเดือนก่อน

    it didn't work for me sadly, I wonder if Google sites has updated something to make it no longer applicable

  • @alexecalderon
    @alexecalderon 4 ปีที่แล้ว

    How can I make not an image but text hover effect

    • @FlippedClassroomTutorials
      @FlippedClassroomTutorials  4 ปีที่แล้ว +1

      I haven't tried that yet. Let me dive into css and see if I can come up with something.

  • @user-si5br9ny5b
    @user-si5br9ny5b ปีที่แล้ว

    the codes are gone on purpose?

  • @jacobavila5666
    @jacobavila5666 2 ปีที่แล้ว

    Can this hover be applied to sites banners on top?

  • @dtv593
    @dtv593 3 ปีที่แล้ว

    Can I have it make a sound, too?

  • @JamesAbela
    @JamesAbela 4 ปีที่แล้ว +2

    I think at this stage people might want to consider embedding a Scratch animation.

    • @FlippedClassroomTutorials
      @FlippedClassroomTutorials  4 ปีที่แล้ว +2

      Couldn't agree more!! More Scratch Videos are being put on my to-do list :-)

    • @wafflestraw8631
      @wafflestraw8631 3 ปีที่แล้ว +1

      I grew up with Scratch...I can say I have done a lot with it!

  • @divyab5858
    @divyab5858 2 ปีที่แล้ว

    how to disable right click in google sites

  • @paulohenriqueximenesdealbu8135
    @paulohenriqueximenesdealbu8135 4 ปีที่แล้ว +1

    can I make this clickable?

  • @jacobuys-pd3iq
    @jacobuys-pd3iq 3 หลายเดือนก่อน

    nice thank but does not work

  • @uselessfact3000
    @uselessfact3000 2 ปีที่แล้ว

    it doesn't work for me... i believe it's because i'm from thailand.
    btw
    สวัสดีปีใหม่! (go translate that yourself) it's probably a little bit late

  • @reblanguelale3465
    @reblanguelale3465 3 หลายเดือนก่อน

    Basically it does not work :/

  • @carinemendes6392
    @carinemendes6392 3 ปีที่แล้ว

    so u telling me i need to duplicate all my 100 images in diferentes dimentions and do code to make my art project happen? nooooooo TAT

    • @FlippedClassroomTutorials
      @FlippedClassroomTutorials  3 ปีที่แล้ว

      It's a workaround. Hopefully we get a native method soon. Make sure to request it using the feedback in Google

  • @lory2videos
    @lory2videos 4 ปีที่แล้ว +2

    A little too fast. Paused but too much info too fast, I'm sorry to say. Otherwise I absolutely love and appreciate all of your videos!

    • @sandorszabo2470
      @sandorszabo2470 4 ปีที่แล้ว +1

      Never mind! A little css trick :-)

    • @FlippedClassroomTutorials
      @FlippedClassroomTutorials  4 ปีที่แล้ว +1

      Thank you for the feedback. I know I went a bit fast in this one. I added all the code in the description as to allow you to copy it as many here on the channel don't seem to enjoy going through html step by step. Will try to make it clearer next time. :-) happy New year!

    • @MrJdorrington
      @MrJdorrington 4 ปีที่แล้ว

      Try reducing playback speed. Then you get a drunken man tutorial.

  • @Mikevelour
    @Mikevelour ปีที่แล้ว

    😳

  • @wenctacoma6513
    @wenctacoma6513 4 ปีที่แล้ว

    Malwarebytes doesn't like your page. Claims there is a trojan

  • @crystxltattoo5531
    @crystxltattoo5531 11 หลายเดือนก่อน +1

    lol

    does the same thing just post in embeds

    • @FlippedClassroomTutorials
      @FlippedClassroomTutorials  11 หลายเดือนก่อน

      Thank you for sharing this. This will work as well and I have added it to the document with examples: tools.eduflip.net/HoverHtml

    • @jab5299
      @jab5299 9 หลายเดือนก่อน

      TY!