Question 176697 in Shopify Question posted in
The Shopify help center can be found here.

Can I enlarge an image on hover using HTML on Shopify?

I am trying to enlarge images on hover using HTML?

I am using Shopify.
Also, how can I add CSS in Shopify?
Can I combine HTML and CSS in the same code body?

Many thanks

For example, this is the image code, where do I put the "hover CSS"

<img class="multicolumn-card__image" srcset="//cdn.shopify.com/s/files/1/0621/4808/3896/files/cover_1_3750b60e-26ea-4618-b8a5-a597e561ecda.png?v=1682523968&amp;width=275 275w,//cdn.shopify.com/s/files/1/0621/4808/3896/files/cover_1_3750b60e-26ea-4618-b8a5-a597e561ecda.png?v=1682523968&amp;width=550 550w,//cdn.shopify.com/s/files/1/0621/4808/3896/files/cover_1_3750b60e-26ea-4618-b8a5-a597e561ecda.png?v=1682523968&amp;width=710 710w,//cdn.shopify.com/s/files/1/0621/4808/3896/files/cover_1_3750b60e-26ea-4618-b8a5-a597e561ecda.png?v=1682523968&amp;width=1420 1420w,//cdn.shopify.com/s/files/1/0621/4808/3896/files/cover_1_3750b60e-26ea-4618-b8a5-a597e561ecda.png?v=1682523968 1564w" src="//cdn.shopify.com/s/files/1/0621/4808/3896/files/cover_1_3750b60e-26ea-4618-b8a5-a597e561ecda.png?v=1682523968&amp;width=550" sizes="(min-width: 990px) 550px,
                        (min-width: 750px) 550px,
                        calc(100vw - 30px)" alt="https://cdn.shopify.com/s/files/1/0621/4808/3896/files/105_Ready_To_Wear_-_The_Shimmering_Selection_1_1b411c2a-2b6f-4a37-8258-708da67cdd82.png?v=1682523879" height="2130" width="1564" loading="lazy" style="<
    style>
.zoom {
  padding: 50px;
    background-color: green;
    transition: transform .2s; /* Animation */
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.zoom:
    hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</
    style>

<div class=&quot;zoom&quot;></div>;
    style>
.zoom {
  padding: 50px;
    background-color: green;
    transition: transform .2s; /* Animation */
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.zoom:
    hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</
    style>

<div class=&quot;zoom&quot;></div>;
">
Tags:

2

Answers


  1. 0

    You can use the scale property in css to increase the image/element size:

    image:hover{
  scale: 1.5;
}

    The value of scale represents the multiple that the element should increase by.

    You could also add a transition to make it smoother:

    image{
  transition: scale .2s;
}
    Login or Signup to reply.
  2. 0

    To enlarge an image on hover using HTML, you can use CSS to apply a transformation to the image when the mouse hovers over it.

    .image-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.image-container img {
  transition: transform 0.3s;
}

.image-container:hover img {
  transform: scale(1.2);
}
    <div class="image-container">
  <img height="300px" src="https://images.unsplash.com/photo-1504860708171-19abd233ec3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Image">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search