1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Enlarge Images When Mouse Hover

Discussion in 'HTML & Website Design' started by MarkStrobel3367, Mar 30, 2018.

  1. #1
    Is there an HTML code that I could use on my site that could enlarge images when a viewer hovers over the image with their cursor? Thanks.
    SEMrush
     
    MarkStrobel3367, Mar 30, 2018 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,443
    Likes Received:
    1,015
    Best Answers:
    19
    Trophy Points:
    400
    #2
    qwikad.com, Mar 30, 2018 IP
  3. MarkStrobel3367

    MarkStrobel3367 Member

    Messages:
    96
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    Thank you so much! https://jsfiddle.net/1n7sm44p/6/ is perfect! How should I position the html code and css code on my page?
     
    MarkStrobel3367, Mar 31, 2018 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,443
    Likes Received:
    1,015
    Best Answers:
    19
    Trophy Points:
    400
    #4
    Just like the way you see it. Copy the css part and paste it into your .css file and the html part into where you want your image(s) to appear (usually HTML or PHP pages).


     
    qwikad.com, Mar 31, 2018 IP
  5. MarkStrobel3367

    MarkStrobel3367 Member

    Messages:
    96
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #5
    The problem is that my site was built with the New Google Sites. I am not aware of a css file within the Google Sites. I know how to insert an html code within my site, but I don't know where the css code goes.
     
    MarkStrobel3367, Mar 31, 2018 IP
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,443
    Likes Received:
    1,015
    Best Answers:
    19
    Trophy Points:
    400
    #6
    I don't know either. Never used Google Sites.
     
    qwikad.com, Mar 31, 2018 IP
  7. MarkStrobel3367

    MarkStrobel3367 Member

    Messages:
    96
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #7
    Well, I understand that there is a way to insert html and css codes on the New Google Sites. I just posted a thread on the Google Sites forum to find out just how to do this.
     
    MarkStrobel3367, Mar 31, 2018 IP
  8. MargoKlein

    MargoKlein Peon

    Messages:
    5
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #8
    It can be done pretty easily with HTML and CSS using the CSS effect Zoom. You do need to setup the basic CSS with box sizing, background, image height/width/border/etc. and set overflow: hidden.
    * {
    -webkit-box-sizing:border-box; /*box setup for different browsers*/
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    }

    body {
    background:#333;
    }

    .pic {
    border:10pxsolid#fff; /*border size and color*/
    float:left;
    height:300px; /*set height, width and margin to what you want*/
    width:300px;
    margin:20px;
    overflow:hidden;
    -webkit-box-shadow:5px5px5px#111;
    box-shadow:5px5px5px#111;
    }

    An example of the HTML:
    <div class="grow pic">
    <img src="path/file/myimg.jpg"alt="myimg">
    </div>

    An example of the CSS needed, set Overflow to Hidden:
    /*GROW*/
    .grow img {
    height: 300px; /*You can set height and width to whatever you want */
    width: 300px;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    }

    .grow img: hover {
    width: 400px; /*Set height and width to the zoom size you want*/
    height: 400px;
    }

    For more ideas on CSS effects, you can look at cloudinary.com's visual web wiki under Image Delivery/CDN, Image Manipulation and Image Filters and Effects.
     
    MargoKlein, Apr 8, 2018 IP
  9. MarkStrobel3367

    MarkStrobel3367 Member

    Messages:
    96
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #9
    Thank you for your response. I'm not very fluent when it comes to html or css. I built a site on the New Google Sites. I can embed both html and css together. How can I combine the html/css code from your example that I could embed?
     
    MarkStrobel3367, Apr 8, 2018 IP